← Todos los specs UI

Contrato del componente

button

Botón base del design system: primary/secondary + estado disabled.

Versión
v1.0.0

Props

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

Slot

Nombre
default
Propósito
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

Accesibilidad

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 validado original
{
  "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