A commonly used action button.

Parameters

Parameter	Description	Type	Optional Values	Default
size	Size	string	small / normal / large	large
type	Type	string	primary / warn / default	default
plain	Whether it is a plain button	boolean	--	false
disabled	Whether it is disabled	boolean	--	false
text	Text	string	--	--
btnStyle	Button style	string	--	--
textStyle	Text style	string	--	--

Slot

name	Description
content	Button content

Basic Usage

Basic button usage.

<view class="test_container">
    <fs-divider tip="Default Buttons"></fs-divider>
    <view class="btn-group">
        <fs-button class="fs-btn-cus" text="default"></fs-button>
        <fs-button class="fs-btn-cus" text="primary" type="primary"></fs-button>
        <fs-button class="fs-btn-cus" text="warn" type="warn"></fs-button>
    </view>
    <fs-divider tip="Plain Buttons"></fs-divider>
    <view class="btn-group">
        <fs-button
            class="fs-btn-cus"
            text="default"
            plain="{{true}}"
        ></fs-button>
        <fs-button
            class="fs-btn-cus"
            text="primary"
            type="primary"
            plain="{{true}}"
        ></fs-button>
        <fs-button
            class="fs-btn-cus"
            text="warn"
            type="warn"
            plain="{{true}}"
        ></fs-button>
    </view>
</view>

Disabled State

The button is unavailable.

<view class="test_container">
    <fs-divider tip="Disabled Buttons"></fs-divider>
    <view class="btn-group">
        <fs-button
            class="fs-btn-cus"
            text="default"
            disabled="{{true}}"
        ></fs-button>
        <fs-button
            class="fs-btn-cus"
            text="primary"
            type="primary"
            disabled="{{true}}"
        ></fs-button>
        <fs-button
            class="fs-btn-cus"
            text="warn"
            type="warn"
            disabled="{{true}}"
        ></fs-button>
        <fs-button
            class="fs-btn-cus"
            text="default"
            plain="{{true}}"
            disabled="{{true}}"
        ></fs-button>
        <fs-button
            class="fs-btn-cus"
            text="primary"
            type="primary"
            plain="{{true}}"
            disabled="{{true}}"
        ></fs-button>
        <fs-button
            class="fs-btn-cus"
            text="warn"
            type="warn"
            plain="{{true}}"
            disabled="{{true}}"
        ></fs-button>
    </view>
</view>

Icon Buttons

Buttons with icons can improve recognition when text is present, or save space when text is absent.

<view class="test_container">
    <fs-divider tip="With Custom Icon"></fs-divider>
    <view class="btn-group">
        <fs-button class="fs-btn-cus" text="default">
            <text class="fs-iconfont" slot="left" style="font-size: 20px;"
                >\uE60f</text
            >
        </fs-button>
    </view>
    <view class="btn-group btn-group-inline">
        <fs-button
            class="inline_fs-btn-cus"
            text="primary"
            type="primary"
            size="normal"
        >
            <text
                class="fs-iconfont"
                slot="left"
                style="color:#fff;font-size: 20px;"
                >\uE60f</text
            >
        </fs-button>
        <fs-button
            class="inline_fs-btn-cus"
            text="default"
            type="warn"
            size="small"
            plain="{{true}}"
        >
            <text
                class="fs-iconfont"
                slot="left"
                style="color:#FF3F3F;font-size: 20px;"
                >\uE60f</text
            >
            <text
                class="fs-iconfont"
                slot="right"
                style="color:#FF3F3F;font-size: 20px;"
                >\uE60f</text
            >
        </fs-button>
    </view>
</view>

Different Sizes

In addition to the default size, the Button component provides three sizes that can be chosen for different scenarios.

<view class="test_container">
  	<fs-divider tip="Normal Size Buttons"></fs-divider>
	<view class="btn-group btn-group-inline">
		<fs-button class="inline_fs-btn-cus" text="default" size="normal"></fs-button>
		<fs-button class="inline_fs-btn-cus" text="primary" type="primary" size="normal"></fs-button>
		<fs-button class="inline_fs-btn-cus" text="warn" type="warn" size="normal"></fs-button>
	</view>
	<view class="btn-group btn-group-inline">
		<fs-button class="inline_fs-btn-cus" text="default" plain="{{true}}" size="normal"></fs-button>
		<fs-button class="inline_fs-btn-cus" text="primary" type="primary" plain="{{true}}" size="normal"></fs-button>
		<fs-button class="inline_fs-btn-cus" text="warn" type="warn" plain="{{true}}" size="normal"></fs-button>
	</view>
	<fs-divider tip="Smallest Buttons"></fs-divider>
	<view class="btn-group btn-group-inline">
		<fs-button class="inline_fs-btn-cus" text="default" size="small"></fs-button>
		<fs-button class="inline_fs-btn-cus" text="primary" type="primary" size="small"></fs-button>
		<fs-button class="inline_fs-btn-cus" text="warn" type="warn" size="small"></fs-button>
	</view>
	<view class="btn-group btn-group-inline">
		<fs-button class="inline_fs-btn-cus" text="default" plain="{{true}}" size="small"></fs-button>
		<fs-button class="inline_fs-btn-cus" text="primary" type="primary" plain="{{true}}" size="small"></fs-button>
		<fs-button class="inline_fs-btn-cus" text="warn" type="warn" plain="{{true}}" size="small"></fs-button>
	</view>
</view>