Prepared Docs

Button is used to take action by clicking or pressing a specific key.

Props

Name	Type	Default	Description
`active`	`boolean`	`false`	When true, applies an active/pressed visual state.
`as`	`InteractableTag`	`InteractableTag.Button`	HTML element tag to render.
`className`	`string`	—	Additional CSS class name(s) applied to the element.
`cornerStyle`	`ComponentCornerStyle`	—	Brand-driven corner treatment; sharp removes rounding on non-link buttons.
`defaultPressed`	`boolean`	—	Uncontrolled initial pressed state when `toggle` is true.
`disabled`	`boolean`	—	When true, disables interaction and applies a disabled visual state.
`external`	`boolean`	`false`	When true, opens the link in a new tab with `rel="noopener noreferrer"` and shows an external link icon.
`href`	`string`	—	URL for link-type buttons. Only used when `type` is `ButtonType.Link`. URL for anchor-based interactables. Changes the rendered element to an `<a>` tag.
`htmlType`	`ButtonHtmlType`	—	Native `<button type="…">`. When omitted, the browser default applies (`submit` inside a `<form>`). Use {@link ButtonHtmlType.Button} for actions that must not submit the form.
`iconTitle`	`string`	—	Accessible title for `leadIcon` and `tailIcon`.
`injectChild`	`boolean`	—	Choose to inject interactivity into a child element such as a Div element
`interactionType`	`InteractableType`	`InteractableType.Default`	Visual style variant for the interactive element.
`leadIcon`	`SVGAsset`	—	SVG icon displayed before the button label. Overridden by `state` when set.
`loadingType`	`LoadingIndicatorType`	—	Explicit loading indicator type. When provided, overrides the default behavior based on button state. If not provided, Loading state uses Loading indicator, Pending state uses Pending indicator.
`onPressedChange`	`((pressed: boolean) => void)`	—	Called when pressed state changes while `toggle` is true.
`pressed`	`boolean`	—	Controlled pressed state when `toggle` is true.
`progress`	`number`	—	0-100 determinate progress overlay on the leadIcon. Requires a leadIcon. Base color on Primary, Destructive, and Success types; Accent color on Secondary. Ignored when state is Loading or Pending.
`ref`	`Ref<HTMLButtonElement>`	—	—
`rel`	`string`	—	Relationship for anchor-based interactables (for example `noopener noreferrer`).
`role`	`string`	—	ARIA role attribute for the interactive element.
`size`	`ButtonSize`	`ButtonSize.Large`	Button size variant. Takes precedence over `small` when both are set.
`small`	`boolean`	`false`	@deprecated Use `size={ButtonSize.Small}` instead. When true, renders a compact button.
`state`	`ButtonState`	—	Button state (Loading/Success/Error). When set, overrides the leadIcon.
`statusDot`	`StatusDotColor`	—	Status dot color. Allowed on all button types except Link.
`statusDotInset`	`boolean`	`false`	When true, positions the status dot inset from the corner.
`tabIndex`	`number`	—	Overrides the default tab order for non-disabled elements. Pass `-1` to remove the element from the tab sequence while keeping it programmatically focusable — useful for listbox/menu items that participate in roving-tabindex / cmdk-style keyboard navigation (the parent handles arrow keys; items should not be reachable via Tab). `disabled` always wins: disabled elements are forced to `-1` regardless of this prop, since putting a disabled control in the tab order is an accessibility bug. Defaults to `0` for enabled elements and `-1` for disabled ones.
`tailIcon`	`SVGAsset`	—	SVG icon displayed after the button label.
`target`	`HTMLAttributeAnchorTarget`	—	Target for anchor-based interactables (for example `_blank`).
`title`	`string`	—	Native HTML title attribute for browser tooltip fallback
`toggle`	`boolean`	—	When true, wraps the button in a standalone Radix Toggle (`asChild`) so it exposes sustained `aria-pressed` / `data-state` semantics. Visual selected fill applies to {@link ButtonType.Secondary} only. Prefer `toggle` over `active` when the control must stay pressed.
`tooltip`	`string`	—	Optional tooltip text to display on hover (uses Radix Tooltip)
`tooltipSide`	`TooltipPosition`	—	Position of the tooltip relative to the element, defaults to "top"
`type`	`ButtonType`	`ButtonType.Secondary`	Enum for button appearance variants, don't use the string value. always use the enum
`visualDensity`	`ComponentVisualDensity`	—	Brand-driven layout default override: tighter padding when compact.

Storybook

Critical

Use to designate key actions, such as accepting a condition that changes the product state. Allow one critical button per page; don't use alongside a primary button.

Primary

Use for important actions like saving or creating something new. Allow one primary button per page; don't use alongside a critical button.

Secondary

Use in the interface for all actions except for those considered primary or critical.

Secondary (Alt)

Use occasionally as an alternative type to differentiate actions of lesser importance from those paired with primary and default buttons. Secondary buttons most often appear in buttons groups as the action of least importance.

Link

Use to designate a link to another part of the product or an external URL. Set type={ButtonType.Link} and pass href so the control renders a navigable anchor.

Internal

Use to link to other parts of the platform. Internal links always open in the same browser tab.

External

Paired with an external link icon, use to link to external URLs only. External links always open in a separate browser tab.

Semantic Types

Semantic or color-coded buttons give users a sense of their purpose without even having to read their label.

Success

Use to indicate a constructive action or confirming a positive state (e.g., a completed process, approving an action).

Destructive

Use to indicate a destructive action or confirming a negative state (e.g., deleting or removing something, taking an irreversible action).

Split

A button with a downward-facing chevron as a tail icon, use in buttons with related actions instead of a button group. Split buttons can also include a lead icon.

Sizes

As with color, sizing also conveys a button's place in a page hierarchy.

Large (default)

Use frequently for most actions. This is the default when size is omitted.

Regular

Use when you need a slightly shorter control than large without going to the compact size.

Small

Use in tight spaces, such as sidebars and floating elements; only pair with other small-sized buttons.

Lead Icon

Use to identify or differentiate the button's usage, such as a "+" icon when adding something.

Tail Icon

Use to provide additional context about the button label or indicate what happens after clicking the button, such as an arrow "→" after "Next."

Loading

Use to indicate that an action is in process; reverts to the previous state when completed.

Disabled

Use for unavailable actions. Always provide context (via tooltip or nearby text) for why the action is unavailable and how to enable it.

Active

active forces open/selected styling without sustained aria-pressed. Prefer toggle when the control must remain pressed.

Toggle

Opt in with toggle on non-link buttons. Wraps a standalone Radix Toggle (asChild) so the same button element gains aria-pressed and data-state. Controlled via pressed / onPressedChange, or uncontrolled via defaultPressed. Selected inset fill applies to ButtonType.Secondary when pressed. Filled types (Primary, Critical, SecondaryAlt, Success, Destructive) apply brightness(var(--brightness-active)) while data-state="on".

Do not use toggle inside a ToggleGroup; group items remain ToggleGroupItem.

Loading indicators

loadingType overrides the spinner when state is loading or pending.

Complete state

Progress on icon

Status dot

Button / Usage

Button / Accessibility

View Source

Submit Issue