Button 按钮

按钮用于触发一个操作。Aether UI 提供 6 种类型、4 种尺寸、7 种变体。

基础类型

<AButton>Default</AButton>
<AButton type="tertiary">Tertiary</AButton>
<AButton type="primary">Primary</AButton>
<AButton type="info">Info</AButton>
<AButton type="success">Success</AButton>
<AButton type="warning">Warning</AButton>
<AButton type="error">Error</AButton>

尺寸

<AButton size="tiny">Tiny</AButton>
<AButton size="small">Small</AButton>
<AButton size="medium">Medium</AButton>
<AButton size="large">Large</AButton>

文字按钮 (text)

去除背景和边框，常用在表格操作列或卡片操作区。

<AButton text>Default</AButton>
<AButton text type="primary">Primary</AButton>

虚线按钮 (dashed)

<AButton dashed>Default</AButton>
<AButton dashed type="primary">Primary</AButton>

幽灵按钮 (ghost)

透明背景，适合深色背景上使用。

<AButton ghost>Default</AButton>
<AButton ghost type="primary">Primary</AButton>

Secondary / Tertiary / Quaternary

三种不同程度的弱化按钮。

<AButton secondary type="primary">Secondary</AButton>
<AButton tertiary type="primary">Tertiary</AButton>
<AButton quaternary type="primary">Quaternary</AButton>

形状

<AButton round>圆角按钮</AButton>
<AButton circle type="primary">A</AButton>

按钮组 (ButtonGroup)

<AButtonGroup>
  <AButton>上海</AButton>
  <AButton type="primary">北京</AButton>
  <AButton>深圳</AButton>
</AButtonGroup>

状态

<AButton disabled>禁用</AButton>
<AButton loading type="primary">加载中</AButton>

块级按钮

<AButton block type="primary">占满宽度</AButton>

自定义颜色

通过 color 和 textColor 属性覆盖默认颜色，hover/pressed 状态自动推导。

<AButton color="#8a2be2">紫色</AButton>
<AButton color="#ff6b6b" text-color="#fff">珊瑚红</AButton>
<AButton dashed color="#8a2be2">紫色虚线</AButton>
<AButton ghost color="#ff6b6b">珊瑚红幽灵</AButton>

波纹控制

文字和虚线按钮默认关闭波纹。可通过 ripple 属性控制。

<AButton type="primary">有波纹</AButton>
<AButton type="primary" :ripple="false">无波纹</AButton>
<AButton text :ripple="true">文字 + 波纹</AButton>
<AButton dashed :ripple="true">虚线 + 波纹</AButton>

API

Button Props

属性	类型	默认值	说明
type	'default' | 'tertiary' | 'primary' | 'info' | 'success' | 'warning' | 'error'	'default'	按钮类型
size	'tiny' | 'small' | 'medium' | 'large'	'medium'	按钮尺寸
text	boolean	false	文字按钮，无背景无边框
ghost	boolean	false	幽灵按钮，透明背景
dashed	boolean	false	虚线边框
secondary	boolean	false	次要按钮
tertiary	boolean	false	三级按钮
quaternary	boolean	false	四级按钮
block	boolean	false	块级按钮，占满容器宽度
round	boolean	false	圆角按钮
circle	boolean	false	圆形按钮
disabled	boolean	false	禁用状态
loading	boolean	false	加载中状态
bordered	boolean	true	是否显示边框
ripple	boolean	true	是否显示点击波纹
color	string	—	自定义背景色
textColor	string	—	自定义文字色
onClick	(e: MouseEvent) => void	—	点击回调

ButtonGroup Props

属性	类型	默认值	说明
size	'tiny' | 'small' | 'medium' | 'large'	—	统一按钮组内尺寸
vertical	boolean	false	竖向排列