Button

Button triggers an in-page action. For navigation, use a link.

Basic usage

Code

<div className="tw:flex tw:flex-wrap tw:gap-2">
  <Button variant="default">Save order</Button>

  <Button variant="outline">Cancel</Button>

  <Button variant="secondary">Add note</Button>

  <Button variant="ghost">View details</Button>

  <Button variant="destructive">Delete order</Button>

  <Button variant="link">View account</Button>
</div>

Sizes

Code

<div className="tw:flex tw:flex-wrap tw:items-center tw:gap-2">
  <Button size="xs">Extra Small</Button>

  <Button size="sm">Small</Button>

  <Button>Default size</Button>

  <Button size="lg">Large</Button>
</div>

Icon sizes

For square icon-only buttons, use icon, icon-xs, icon-sm, or icon-lg instead of the text sizes. These set equal width and height with no horizontal padding.

Code

<div className="tw:flex tw:flex-wrap tw:items-center tw:gap-2">
  <Button size="icon-xs" variant="outline" aria-label="Add item">
    <PlusIcon />
  </Button>

  <Button size="icon-sm" variant="outline" aria-label="Add item">
    <PlusIcon />
  </Button>

  <Button size="icon" variant="outline" aria-label="Add item">
    <PlusIcon />
  </Button>

  <Button size="icon-lg" variant="outline" aria-label="Add item">
    <PlusIcon />
  </Button>
</div>

Disabled

Code

<div className="tw:flex tw:gap-2">
  <Button disabled>Save order</Button>

  <Button variant="outline" disabled>
    Cancel
  </Button>
</div>

API

Button

Name	Type/Description
className	string | ((state: ButtonState) => string | undefined) | undefined CSS class applied to the element, or a function that returns a class based on the component's state.
focusableWhenDisabled = false	boolean | undefined Whether the button should be focusable when disabled.
nativeButton = true	boolean | undefined Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
render	ReactElement<any, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState> | undefined Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
size = "default"	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined) | undefined Style applied to the element, or a function that returns a style object based on the component's state.
variant = "default"	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined