iantype.com
Button操作

Components / 操作

Button

定义按钮的结构、状态、Token 和使用边界。

结构

组成部分

  1. 01容器
  2. 02标签
  3. 03可选前置图标
  4. 04可选后置图标
  5. 05加载指示器

预览

交互调整

强调色使用受限

当前 Token
  • component.button.height.md
  • component.button.typography.md.size
  • component.button.background.filled.accent.rest
  • component.button.text.onAccent
<Button appearance="filled" intent="accent" size="md" shape="rounded">保存</Button>

外观

视觉样式

  • 填充 · filled
  • 浅染 · tinted
  • 描边 · outline
  • 纯文本 · plain
  • 链接 · link

尺寸

规格

  • 小 · sm · 36px
  • 中 · md · 44px
  • 大 · lg · 52px

状态

交互状态

默认
悬停
按下
可见焦点
禁用
加载

内容

使用规则

建议

  • 每个决策区域只保留一个填充型强调操作。
  • 次级操作使用中性描边或纯文本外观。

避免

  • 不要用尺寸表达主要与次要关系。
  • 不要把浅染外观当作所有次级按钮的默认样式。

Token

组件映射

名称类型浅色深色预览
component.button.background.rest按钮默认背景coloroklch(1 0 0)oklch(0.29 0.003 255)
component.button.background.hover按钮悬停背景coloroklch(0.95 0 255)oklch(0.38 0.007 255)
component.button.background.selected按钮选中背景coloroklch(0.368 0.161 261.395)oklch(0.82 0.052 261.395)
component.button.text.default按钮文字coloroklch(0.2 0.001 255)oklch(0.98 0 255)
component.button.border.default按钮边框coloroklch(0.82 0.004 255)oklch(0.47 0.01 255)
component.button.radius按钮圆角dimension0.625rem0.625remAa
component.button.motion.duration按钮交互动效duration120ms120msAa
component.button.height.sm小按钮高度dimension2.25rem2.25remAa
component.button.height.md中按钮高度dimension2.75rem2.75remAa
component.button.height.lg大按钮高度dimension3.25rem3.25remAa
component.button.typography.sm.size小按钮字号dimension0.8125rem0.8125remAa
component.button.typography.md.size中按钮字号dimension0.875rem0.875remAa
component.button.typography.lg.size大按钮字号dimension1rem1remAa
component.button.typography.weight按钮字重fontWeight600600Aa
component.button.typography.leading按钮行高number11Aa
component.button.spacing.gap按钮内容间距dimension0.5rem0.5remAa
component.button.spacing.inline.sm小按钮横向内距dimension0.75rem0.75remAa
component.button.spacing.inline.md中按钮横向内距dimension1rem1remAa
component.button.spacing.inline.lg大按钮横向内距dimension1.25rem1.25remAa
component.button.focus.width按钮焦点环宽度dimension2px2pxAa
component.button.icon.stroke按钮图标描边number1.51.5Aa
component.button.motion.easing按钮缓动cubicBeziercubic-bezier(0.2, 0, 0, 1)cubic-bezier(0.2, 0, 0, 1)Aa
component.button.motion.pressScale按钮按压缩放number0.960.96Aa
component.button.motion.loadingCycle按钮加载循环duration800ms800msAa
component.button.opacity.disabled按钮禁用透明度number0.50.5Aa
component.button.background.filled.accent.rest强调填充按钮coloroklch(0.368 0.161 261.395)oklch(0.82 0.052 261.395)
component.button.background.filled.accent.hover强调填充按钮悬停coloroklch(0.29 0.058 261.395)oklch(0.9 0.019 261.395)
component.button.background.filled.accent.pressed强调填充按钮按下coloroklch(0.2 0.022 261.395)oklch(0.95 0.006 261.395)
component.button.background.filled.neutral.rest中性填充按钮coloroklch(0.2 0.001 255)oklch(0.98 0 255)
component.button.background.filled.neutral.hover中性填充按钮悬停coloroklch(0.38 0.007 255)oklch(0.95 0 255)
component.button.background.filled.neutral.pressed中性填充按钮按下coloroklch(0.47 0.01 255)oklch(0.9 0.002 255)
component.button.background.filled.destructive.rest危险填充按钮coloroklch(0.38 0.095 25)oklch(0.82 0.056 25)
component.button.background.filled.destructive.hover危险填充按钮悬停coloroklch(0.29 0.05 25)oklch(0.9 0.02 25)
component.button.background.filled.destructive.pressed危险填充按钮按下coloroklch(0.2 0.019 25)oklch(0.95 0.006 25)
component.button.background.tinted.accent.rest弱强调按钮coloroklch(0.95 0.006 261.395)oklch(0.29 0.058 261.395)
component.button.background.tinted.accent.hover弱强调按钮悬停coloroklch(0.9 0.019 261.395)oklch(0.368 0.161 261.395)
component.button.background.tinted.accent.pressed弱强调按钮按下coloroklch(0.82 0.052 261.395)oklch(0.47 0.167 261.395)
component.button.background.tinted.neutral.rest中性浅染按钮coloroklch(0.95 0 255)oklch(0.38 0.007 255)
component.button.background.tinted.neutral.hover中性浅染按钮悬停coloroklch(0.95 0 255)oklch(0.38 0.007 255)
component.button.background.tinted.neutral.pressed中性浅染按钮按下coloroklch(0.9 0.002 255)oklch(0.47 0.01 255)
component.button.background.tinted.destructive.rest危险浅染按钮coloroklch(0.95 0.006 25)oklch(0.29 0.05 25)
component.button.background.tinted.destructive.hover危险浅染按钮悬停coloroklch(0.9 0.02 25)oklch(0.38 0.095 25)
component.button.background.tinted.destructive.pressed危险浅染按钮按下coloroklch(0.82 0.056 25)oklch(0.47 0.145 25)
component.button.background.outline.rest轮廓按钮背景coloroklch(1 0 0)oklch(0.29 0.003 255)
component.button.background.outline.hover轮廓按钮悬停coloroklch(0.95 0 255)oklch(0.38 0.007 255)
component.button.background.outline.pressed轮廓按钮按下coloroklch(0.9 0.002 255)oklch(0.47 0.01 255)
component.button.background.plain.rest文本按钮默认背景coloroklch(0 0 0 / 0)oklch(0 0 0 / 0)
component.button.background.plain.hover文本按钮悬停coloroklch(0.95 0 255)oklch(0.38 0.007 255)
component.button.background.plain.pressed文本按钮按下coloroklch(0.9 0.002 255)oklch(0.47 0.01 255)
component.button.background.link.rest链接按钮默认背景coloroklch(0 0 0 / 0)oklch(0 0 0 / 0)
component.button.text.onAccent强调按钮文字coloroklch(1 0 0)oklch(0.2 0.001 255)
component.button.text.accent强调文本按钮coloroklch(0.368 0.161 261.395)oklch(0.82 0.052 261.395)
component.button.text.destructive危险按钮文字coloroklch(0.38 0.095 25)oklch(0.82 0.056 25)
component.button.border.outline轮廓按钮边框coloroklch(0.82 0.004 255)oklch(0.47 0.01 255)

无障碍

语义与键盘

无障碍

  • 使用原生语义或完整实现对应 ARIA 模式。
  • 提供可见焦点和不依赖颜色的状态提示。

键盘

  • Tab 进入或离开组件。
  • Enter 或 Space 执行当前操作。

属性与接口

公开接口

属性类型默认值说明
appearance"filled" | "tinted" | "outline" | "plain" | "link"filled视觉外观。
intent"accent" | "neutral" | "destructive"accent语义意图。
size"sm" | "md" | "lg"md控件尺寸。
shape"rounded" | "pill"rounded圆角形状。
loadingbooleanfalse显示加载状态并设置 aria-busy。
startIcon / endIconReactNode—标签两侧的可选图标。
<Button appearance="filled" intent="accent" size="md">保存</Button>
Design system