Button

Props

• children
  ReactNode

  The button's label: a verb first, in sentence case.

• count
  number

  A count after the label.

• disabledReason
  string

  Why the button is disabled, shown as a tooltip. The button stays focusable so people can read it.

• fullWidth
  boolean

  Fills the width of its container.

• href
  string

  Renders a link that looks like the button.

• icon
  IconSvgElement

  The only content of an icon button; give it an aria-label.

• leadingIcon
  IconSvgElement

  An icon before the text.

• loading
  boolean

  Work is underway: the button is busy and ignores clicks at once; the spinner shows only once the work has taken 300ms, then for at least 400ms (useDelayedLoading). It replaces the leading icon, or covers the label; the width never changes.

• rel
  string

  The link's relationship, as on an a element.

• reserveLabels
  ReactNode[]

  Every label this button can show ("Copy key", "Copied"). The button keeps the width of the widest, so a state change never resizes it.

• shape
  "pill" | "circle"

  Icon-only buttons are circles and need an accessible name.

• shortcut
  string[] | string[][]

  A shortcut hint after the label (lg and xl, and in menus).

• size
  "md" | "xs" | "sm" | "lg" | "xl"

  The height, from xs (24px) to xl (44px).

• target
  string

  Where the link opens, as on an a element.

• trailingIcon
  IconSvgElement

  An icon after the text.

• variant
  "danger" | "link" | "secondary" | "primary" | "ghost" | "quiet" | "soft" | "danger-secondary"

  primary for the one main action of a view, secondary for others, ghost and quiet for toolbars, danger for destructive actions.