Chiralkit
← 全部 UI 规范

组件契约

button

设计系统的基础按钮——提供 primary/secondary 变体及 disabled 状态。

版本
v1.0.0

Props

名称类型取值默认值
variantenumprimary, secondary, ghostprimary
sizeenummd, lgmd
disabledboolean—false
typeenumbutton, submit, resetbutton
hrefstring——

插槽

名称
default
用途
button label content

Token

colors
interactive.button.primary.default, interactive.button.primary.hover, interactive.button.secondary.default, interactive.button.secondary.hover, interactive.button.primary.text, interactive.button.secondary.text, interactive.button.focus
spacing
primitive.spacing.sm, primitive.spacing.md, primitive.spacing.lg, primitive.spacing.xl
radius
primitive.radius.sm, primitive.radius.md
font
primitive.font.family, primitive.font.size-md

无障碍

native_element
button or a (when href is set)
keyboard
["Enter activates","Space activates (for button element)"]
disabled_semantics
native_disabled_attribute (button only; a-element href does not respect disabled)
经过校验的原始 JSON
{
  "name": "button",
  "version": "1.0.0",
  "props": {
    "variant": {
      "type": "enum",
      "values": [
        "primary",
        "secondary",
        "ghost"
      ],
      "default": "primary"
    },
    "size": {
      "type": "enum",
      "values": [
        "md",
        "lg"
      ],
      "default": "md"
    },
    "disabled": {
      "type": "boolean",
      "default": false
    },
    "type": {
      "type": "enum",
      "values": [
        "button",
        "submit",
        "reset"
      ],
      "default": "button"
    },
    "href": {
      "type": "string"
    }
  },
  "slot": {
    "name": "default",
    "purpose": "button label content"
  },
  "tokens_used": {
    "colors": [
      "interactive.button.primary.default",
      "interactive.button.primary.hover",
      "interactive.button.secondary.default",
      "interactive.button.secondary.hover",
      "interactive.button.primary.text",
      "interactive.button.secondary.text",
      "interactive.button.focus"
    ],
    "spacing": [
      "primitive.spacing.sm",
      "primitive.spacing.md",
      "primitive.spacing.lg",
      "primitive.spacing.xl"
    ],
    "radius": [
      "primitive.radius.sm",
      "primitive.radius.md"
    ],
    "font": [
      "primitive.font.family",
      "primitive.font.size-md"
    ]
  },
  "a11y": {
    "native_element": "button or a (when href is set)",
    "keyboard": [
      "Enter activates",
      "Space activates (for button element)"
    ],
    "disabled_semantics": "native_disabled_attribute (button only; a-element href does not respect disabled)"
  }
}
ChiralFM