English
fs-button
About 671 wordsAbout 2 min
2025-04-28
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>