# Button

Button: trigger an action; submit a form
Not for: go to another page (use Link); show a status (use Badge); copy a value to the clipboard (use CopyButton)

Primary interactive element for triggering actions. Short action labels display uppercase. A label that does not fit wraps and centers, and the button grows with it; a one-line button keeps its exact height, also in a row that stretches its items. A label made of text and an element (an identifier in code, a case-sensitive name in a span) wraps as one block, and an icon at either end stays beside it, drawn at 12, 16 and 20 px for sm, md and lg so it fits the one-line height. Code and kbd retain their casing, and code breaks anywhere; wrap other case-sensitive names or IDs in a child with normal-case tracking-normal oprt-wrap-anywhere. Shape: the primary variant carries a cut top-right corner at rest, and every enabled button takes a second cut at the opposite corner on hover, press and keyboard focus; an armed danger button fills with hazard stripes; segments of an attached ButtonGroup stay square. The fill and edge are drawn by a layer clipped to that shape, so bg-* and border-* classes do not change them: set --oprt-cut-fill and --oprt-cut-edge instead. The oprt-cut-none class squares off one button, or every button inside the element that carries it.

Props:
  motion: auto (default) | none. Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate.
  variant: primary (default) | secondary | tertiary | danger | ghost
    primary: The one main action of a view or dialog. At most one in view: it carries the cut corner.
    secondary: Other important actions beside the primary.
    tertiary: Low-emphasis actions: toolbars, and actions repeated on every row.
    danger: A destructive or irreversible action. Pair it with ConfirmDialog.
    ghost: The least emphasis: an inline action inside dense content.
  size: sm | md (default) | lg
    sm: Dense tables, toolbars and the inside of cards.
    md: The default.
    lg: The main call to action on a page, and touch-first screens.
  disabled: boolean (default false). Unavailable: dim text on the control outline, no hover, and it never activates. A Button that is a Tooltip or Popover trigger with an explanation stays in the Tab order (aria-disabled) so the explanation can be reached.
  asChild: boolean (default false). Renders the child element in place of the button, for example a link; the child's own content is not laid out for you, so put a label made of text and an element in one span. A disabled asChild Button is aria-disabled, leaves the Tab order and blocks the click and the middle click, but a browser still offers the link's address (open in a new tab, copy link) and a child can override the block: show unavailable navigation as plain text.
Goes inside: ButtonGroup, Toolbar, CardFooter
Never inside: Button, Badge
Example: <Button variant="primary" size="md">DEPLOY</Button>

Rendered examples: [Button in the docs](/docs/components/button)