Introduction

The button component is used to trigger actions, such as submitting forms, navigating pages, and more. It supports multiple themes (theme), variants (variant), sizes (size), shapes (shape), states (state), disabled, icon, and other features to suit different business scenarios.

Usage

Import locally by configuring it in the index.json of the page or component where it is needed:

"usingComponents": {
  "fs-button": "ava-ui/fxui/fs-button/index"
}

Code Demos

Button Theme (theme)

Button Variant (variant)

Button Size (size)

Icon Button

Button Shape (shape)

Button State (state)

API

Properties

Property	Description	Type	Options	Default
theme	Button theme	string	default/primary/warn/black	default
variant	Button variant	string	base/outline/text	base
size	Button size	string	micro/mini/small/medium/large	medium
shape	Button shape	string	default/round-rect/square/circle	default
disabled	Whether disabled	boolean	—	false
loading	Whether loading	boolean	—	false
active	Whether to enable press effect	boolean	—	true
text	Button text	string	—	—
icon	Icon name	string	—	—
iconPosition	Icon position	string	left/right	left
btnStyle	Custom button style	string	—	''
textStyle	Custom text style	string	—	''
iconStyle	Custom icon style	string	—	''
maxWidth	Button max width	string	—	'100%'
minWidth	Button min width	string	—	''
tapId	Button click identifier	string	—	''

Size Specifications

The button provides five sizes, allowing you to choose the appropriate button size for different scenarios.

Size	Description	Height (px)	Font size (px)	Padding (px)	Multi-line support
micro	Extra small	24	12	12 each side	Not supported
mini	Mini	28	13	13 each side	Not supported
small	Small	32	13	13 each side	Supported
medium	Medium (default)	36	14	14 each side	Not supported
large	Large	40	13	13 each side	Supported

• micro (24px): Suitable for extremely tight spaces or auxiliary operations, such as buttons inside a table
• mini (28px): Suitable for compact spaces or secondary actions, such as toolbar buttons
• small (32px): Suitable for typical lists or compact interfaces, supports two-line text display
• medium (36px): Default size, suitable for most scenarios
• large (40px): Suitable for emphasized primary actions or touch-optimized scenarios, supports two-line text display

Shape Specifications

Shape	Description	Corner radius	Aspect ratio
default	Default rectangle	8px	Auto
round-rect	Rounded rectangle	999rpx	Auto
square	Square (icon only)	8px	1:1
circle	Circle (icon only)	50%	1:1

Events

Event name	Description	Callback params
onclick	Triggered when the button is clicked

Slot

Name	Description
Default	Button content

Notes

• Supports setting an icon via the icon property, using fxui/common_css/iconfont.
• Supports customizing icon styles such as color and size via the iconStyle property.
• Supports switching between base, outline, and text variants via the variant property.
• Supports switching between primary, default, warn, and black themes via the theme property.
• Supports switching between default, rounded rectangle, square, and circle shapes via the shape property.
• Supports the loading state; the button is not clickable while loading.
• Supports the disabled state; the button is not clickable and its style is dimmed while disabled.
• Supports pressed-state styling; the background color darkens on press.
• Supports the active property to control the press effect; set to false to disable the visual press effect while remaining clickable.
• Supports custom button content, styles, and icons.
• Supports setting the button max width via the maxWidth property, defaulting to '100%'.
• Supports setting the button min width via the minWidth property to ensure the button is not too narrow.
• Supports setting a click identifier via the tapId property for event tracking.

minWidth Usage Examples

Setting a Fixed Minimum Width

<!-- Set minimum width to 120px -->
<fs-button text="Submit" minWidth="120px" />

<!-- Set minimum width to 8rem -->
<fs-button text="Cancel" minWidth="8rem" />

<!-- Set minimum width to 100rpx -->
<fs-button text="OK" minWidth="100rpx" />

Using Together with maxWidth

<!-- Set width range: min 120px, max 200px -->
<fs-button text="Long Text Button" minWidth="120px" maxWidth="200px" />

<!-- Set width range: min 8rem, max 100% -->
<fs-button text="Auto Width Button" minWidth="8rem" maxWidth="100%" />

Minimum Width for Different Button Sizes

<!-- Set minimum width for a small button -->
<fs-button text="Small Button" size="small" minWidth="80px" />

<!-- Set minimum width for a large button -->
<fs-button text="Large Button" size="large" minWidth="160px" />

iconStyle Usage Examples

Customizing Icon Color

<!-- Red icon -->
<fs-button text="Delete" icon="fxui_all-delete" iconStyle="color: #ff4d4f;" />

<!-- Blue icon -->
<fs-button text="Edit" icon="fxui_all-edit" iconStyle="color: #1890ff;" />

Customizing Icon Size

<!-- Large icon -->
<fs-button text="Large Icon" icon="fxui_all-add" iconStyle="font-size: 18px;" />

<!-- Small icon -->
<fs-button text="Small Icon" icon="fxui_all-add" iconStyle="font-size: 12px;" />

Combined Styles

<!-- Custom color and size -->
<fs-button
  text="Custom Icon"
  icon="fxui_all-star"
  iconStyle="color: #faad14; font-size: 16px;"
/>

<!-- Icon with opacity -->
<fs-button
  text="Semi-transparent Icon"
  icon="fxui_all-heart"
  iconStyle="color: #ff4d4f; opacity: 0.6;"
/>

Font Specification Classes (without color)

Figma Variable	Class Name	Font Size	Line Height	Font Weight
Caption2	.text-10	10px	14px	normal
Caption2-M	.text-10_M	10px	14px	medium
Caption2-B	.text-10_B	10px	14px	bold
Caption1	.text-11	11px	14px	normal
Caption1-M	.text-11_M	11px	14px	medium
Caption1-B	.text-11_B	11px	14px	bold
Foot Note	.text-12	12px	18px	normal
Foot Note-M	.text-12_M	12px	18px	medium
Foot Note-B	.text-12_B	12px	18px	bold
Body2	.text-13	13px	18px	normal
Body2-M	.text-13_M	13px	18px	medium
Body2-B	.text-13_B	13px	18px	bold
Body1	.text-14	14px	20px	normal
Body1-M	.text-14_M	14px	20px	medium
Body1-B	.text-14_B	14px	20px	bold
Title2	.text-15	15px	24px	normal
Title2-M	.text-15_M	15px	24px	medium
Title2-B	.text-15_B	15px	24px	bold
Title1	.text-16	16px	24px	normal
Title1-M	.text-16_M	16px	24px	medium
Title1-B	.text-16_B	16px	24px	bold
Large Title	.text-18	18px	28px	normal
Large Title-M	.text-18_M	18px	28px	medium
Large Title-B	.text-18_B	18px	28px	bold
Nav Title	.text-20	20px	30px	normal
Nav Title-M	.text-20_M	20px	30px	medium
Nav Title-B	.text-20_B	20px	30px	bold
22	.text-22	22px	30px	normal
22-M	.text-22_M	22px	30px	medium
22-B	.text-22_B	22px	30px	bold
BI Title	.text-28_B	28px	32px	bold

Font Weight Variants

Each font size provides three weight variants:

• No suffix: normal weight (e.g. .text-14)
• _M suffix: medium weight (e.g. .text-14_M)
• _B suffix: bold weight (e.g. .text-14_B)

打开预览