← All UI specs

Component contract

button

Base design system button — primary/secondary variants with a disabled state.

Version
v1.0.0

Props

NameTypeValuesDefault
variantenumprimary, secondary, ghostprimary
sizeenummd, lgmd
disabledboolean—false
typeenumbutton, submit, resetbutton
hrefstring——

Slot

Name
default
Purpose
button label content

Tokens

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

Accessibility

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)
Raw validated 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