Button 按钮

一套轻松、友好的手绘风按钮，适用于操作、提交和轻量导航场景。

★选择提示先确定操作语义，再组合类型、尺寸、形状和状态，保持同一场景的一致性。

常用操作

分段操作不需要新增组件，使用 super-button 和公开的 button Part 即可组合。

▣保存⊗取消♲删除⇩下载•••更多

类型

主要按钮按钮

次要按钮按钮

成功按钮按钮

警告按钮按钮

危险按钮按钮

描边按钮按钮

幽灵按钮按钮

文字按钮按钮

图标按钮♡

胶囊按钮按钮

圆角方形☆

加载按钮

<super-button variant="primary">按钮</super-button>
<super-button variant="success" shape="pill">按钮</super-button>
<super-button variant="outline" shape="square" aria-label="收藏">♡</super-button>

尺寸

大按钮按钮按钮按钮按钮按钮按钮♡

中按钮按钮按钮按钮按钮按钮按钮♡

小按钮按钮按钮按钮按钮按钮按钮♡

状态

悬停和按下列使用固定演示样式；页面中的其他按钮可以直接交互体验真实状态。

默认按钮按钮按钮按钮按钮

悬停按钮按钮按钮按钮按钮

按下按钮按钮按钮按钮按钮

禁用按钮按钮按钮按钮按钮

图标位置

组件不绑定任何图标库，使用 prefix 和 suffix Slot 接收 SVG、图标组件或文本符号。

☆按钮✓成功♲删除按钮→下一步›更多•••

<super-button variant="success">
  <my-check-icon slot="prefix"></my-check-icon>
  成功
</super-button>

<super-button variant="outline">
  更多
  <my-more-icon slot="suffix"></my-more-icon>
</super-button>

加载状态

loading 会禁用交互、添加 aria-busy="true" 并显示内置手绘旋转指示器。设置 loading-text 可以暂时替换默认内容。

按钮提交继续

<super-button loading loading-text="加载中...">提交</super-button>

API

Attributes / Properties

名称	类型	默认值	说明
variant	primary | secondary | success | warning | danger | outline | ghost | text	primary	视觉与语义类型
size	large | medium | small	medium	按钮尺寸
shape	default | pill | square	default	默认、胶囊或等宽方形
disabled	boolean	false	禁用后不可点击且不可聚焦
loading	boolean	false	显示加载状态并禁止点击
loading-text	string	空字符串	加载时替换默认内容；为空则保留原内容
aria-label	string	空字符串	图标按钮的可访问名称，会转发到内部按钮

Slots

名称	说明
默认 Slot	按钮文字或图标按钮的图标
prefix	左侧图标
suffix	右侧图标

CSS Parts

名称	说明
button	内部原生按钮，可用于分段组合等高级布局
label	内容标签
spinner	加载指示器

CSS Custom Properties

所有视觉 token 均可从宿主覆盖，常用项包括：

super-button {
  --super-button-background: #4b87f5;
  --super-button-color: #fff;
  --super-button-border-color: #174ea6;
  --super-button-shadow-color: #174ea6;
  --super-button-focus-color: #56c6b7;
  --super-button-rotation: -0.25deg;
}