Component contract
button
Base design system button — primary/secondary variants with a disabled state.
- Version
- v1.0.0
Props
| Name | Type | Values | Default |
|---|---|---|---|
| variant | enum | primary, secondary, ghost | primary |
| size | enum | md, lg | md |
| disabled | boolean | — | false |
| type | enum | button, submit, reset | button |
| href | string | — | — |
Slot
- Name
- default
- Purpose
- button label content
Tokens
- colors
- primary, primary-hover, secondary, secondary-hover, text-on-primary, text-on-secondary
- spacing
- sm, md, lg, xl
- radius
- sm, md
- font
- family, 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": [
"primary",
"primary-hover",
"secondary",
"secondary-hover",
"text-on-primary",
"text-on-secondary"
],
"spacing": [
"sm",
"md",
"lg",
"xl"
],
"radius": [
"sm",
"md"
],
"font": [
"family",
"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)"
}
}