<view class="page">
    <view class="page__hd">
        <view class="page__title">Button</view>
        <view class="page__desc">按钮</view>
    </view>
    <view class="page__bd page__bd_spacing">
        <view class="sub-title">Type</view>
        <wux-button block type="light">light</wux-button>
        <wux-button block type="stable">stable</wux-button>
        <wux-button block type="positive">positive</wux-button>
        <wux-button block type="calm">calm</wux-button>
        <wux-button block type="assertive">assertive</wux-button>
        <wux-button block type="balanced">balanced</wux-button>
        <wux-button block type="energized">energized</wux-button>
        <wux-button block type="royal">royal</wux-button>
        <wux-button block type="dark">dark</wux-button>
        <view class="sub-title">Outline</view>
        <wux-button block outline type="light">light</wux-button>
        <wux-button block outline type="stable">stable</wux-button>
        <wux-button block outline type="positive">positive</wux-button>
        <wux-button block outline type="calm">calm</wux-button>
        <wux-button block outline type="assertive">assertive</wux-button>
        <wux-button block outline type="balanced">balanced</wux-button>
        <wux-button block outline type="energized">energized</wux-button>
        <wux-button block outline type="royal">royal</wux-button>
        <wux-button block outline type="dark">dark</wux-button>
        <view class="sub-title">Shapes</view>
        <wux-button block type="light">light</wux-button>
        <wux-button block type="stable">stable</wux-button>
        <wux-button block type="positive">positive</wux-button>
        <wux-button block shape="rounded" type="calm">calm</wux-button>
        <wux-button block shape="rounded" type="assertive">assertive</wux-button>
        <wux-button block shape="rounded" type="balanced">balanced</wux-button>
        <wux-button block shape="rectangular" type="energized">energized</wux-button>
        <wux-button block shape="rectangular" type="royal">royal</wux-button>
        <wux-button block shape="rectangular" type="dark">dark</wux-button>
        <view class="sub-title">Size</view>
        <wux-button block size="small" type="light">light</wux-button>
        <wux-button block size="small" type="stable">stable</wux-button>
        <wux-button block size="small" type="positive">positive</wux-button>
        <wux-button block size="default" type="calm">calm</wux-button>
        <wux-button block size="default" type="assertive">assertive</wux-button>
        <wux-button block size="default" type="balanced">balanced</wux-button>
        <wux-button block size="large" type="energized">energized</wux-button>
        <wux-button block size="large" type="royal">royal</wux-button>
        <wux-button block size="large" type="dark">dark</wux-button>
        <view class="sub-title">Clear</view>
        <wux-button block clear type="light">light</wux-button>
        <wux-button block clear type="stable">stable</wux-button>
        <wux-button block clear type="positive">positive</wux-button>
        <wux-button block clear type="calm">calm</wux-button>
        <wux-button block clear type="assertive">assertive</wux-button>
        <wux-button block clear type="balanced">balanced</wux-button>
        <wux-button block clear type="energized">energized</wux-button>
        <wux-button block clear type="royal">royal</wux-button>
        <wux-button block clear type="dark">dark</wux-button>
        <view class="sub-title">Loading</view>
        <wux-button block loading type="light">light</wux-button>
        <wux-button block loading type="stable">stable</wux-button>
        <wux-button block loading type="positive">positive</wux-button>
        <wux-button block loading type="calm">calm</wux-button>
        <wux-button block loading type="assertive">assertive</wux-button>
        <wux-button block loading type="balanced">balanced</wux-button>
        <wux-button block loading type="energized">energized</wux-button>
        <wux-button block loading type="royal">royal</wux-button>
        <wux-button block loading type="dark">dark</wux-button>
        <view class="sub-title">Disabled</view>
        <wux-button block disabled type="light">light</wux-button>
        <wux-button block disabled type="stable">stable</wux-button>
        <wux-button block disabled type="positive">positive</wux-button>
        <wux-button block disabled type="calm">calm</wux-button>
        <wux-button block disabled type="assertive">assertive</wux-button>
        <wux-button block disabled type="balanced">balanced</wux-button>
        <wux-button block disabled type="energized">energized</wux-button>
        <wux-button block disabled type="royal">royal</wux-button>
        <wux-button block disabled type="dark">dark</wux-button>
        <view class="sub-title">Icon</view>
        <wux-button block type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
        <wux-button block outline type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
        <wux-button block size="small" type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
        <wux-button block size="default" type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
        <wux-button block size="large" type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
        <wux-button block clear type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
        <wux-button block disabled type="balanced"><wux-icon type="ios-save" size="16" /> balanced</wux-button>
    </view>
</view>