Button 按钮

用于触发操作，支持多种类型、尺寸、状态、圆角、块级、图标和自定义颜色。下面的示例按亮色主题和深色主题成组展示，便于直接对比。

按钮类型

Light

Dark

<MoButton>Default</MoButton>
<MoButton type="ghost">Ghost</MoButton>
<MoButton type="primary">Primary</MoButton>
<MoButton type="secondary">Secondary</MoButton>
<MoButton type="gradient">Gradient</MoButton>
<MoButton type="success">Success</MoButton>
<MoButton type="warning">Warning</MoButton>
<MoButton type="danger">Danger</MoButton>

<MoButton theme="dark">Default</MoButton>
<MoButton theme="dark" type="primary">Primary</MoButton>

按钮尺寸

Light

Dark

<MoButton size="small" type="primary">Small</MoButton>
<MoButton type="primary">Default</MoButton>
<MoButton size="large" type="primary">Large</MoButton>

禁用与加载

Light

Dark

<MoButton disabled>Disabled</MoButton>
<MoButton type="primary" disabled>Disabled Primary</MoButton>
<MoButton loading>Loading</MoButton>
<MoButton type="primary" loading>Loading Primary</MoButton>

圆角与块级

Light

Dark

<MoButton round>Round</MoButton>
<MoButton round type="primary">Round Primary</MoButton>
<MoButton block type="gradient">Block Button</MoButton>

图标与插槽

Light

Dark

<MoButton type="primary">
  <template #prefix>+</template>
  新建
</MoButton>

<MoButton type="secondary">
  下一步
  <template #suffix>→</template>
</MoButton>

<MoButton icon aria-label="刷新">
  <template #icon>↻</template>
</MoButton>

自定义颜色

Light

Dark

<MoButton
  background-color="#111827"
  border-color="#111827"
  text-color="#ffffff"
>
  深色填充
</MoButton>

API

属性	说明	类型	默认值
type	按钮类型	default | ghost | primary | secondary | gradient | success | warning | danger	default
size	尺寸	small | default | large	default
theme	主题	light | dark	light
disabled	是否禁用	boolean	false
loading	是否加载中	boolean	false
round	是否圆角胶囊	boolean	false
icon	是否图标按钮	boolean	false
block	是否占满父容器宽度	boolean	false
backgroundColor	自定义背景色	string	-
borderColor	自定义边框色	string	-
textColor	自定义文字色	string	-

Events

事件	说明	参数
click	点击按钮时触发；禁用或加载中不会触发	MouseEvent

Slots

插槽	说明
default	按钮内容
icon	图标内容；无默认插槽时会展示为纯图标按钮
prefix	前置内容，纯图标按钮下不展示
suffix	后置内容，纯图标按钮下不展示