Button

Trigger actions with a single click.

Installation

pnpm add @base-ui/react

Examples

Free, accessible React button components built with Base UI for actions, forms, and navigation with primary, secondary, and ghost variants.

Base


Secondary

A neutral style for less prominent actions.


Secondary with Icon

Add a task to a project board.


Subtle

A subtle background style with danger hover effect.


Danger

A high-contrast style for destructive actions.


Outlined

A bordered style with a transparent background.


Ghost

A subtle style that only appears on hover.


A style that mimics a standard text link.


Favorite

Rate or favorite content with a count.


Icon

Combine text with an icon for better context.


Icon Only

Display a button containing only an icon.


Circle

A perfectly circular icon button for compact actions.


Loading

Indicate an ongoing process with a spinner.


Group

Group multiple buttons together.


Group Icon

Group icon-only buttons together.


Pill

Pill-shaped buttons: primary, secondary, and subtle.


Icon Pill

Pill-shaped buttons with icon and text.


Disabled

Prevent user interaction using the disabled prop.

Size Examples

Different sizes for all existing button variants.

Small

A small button size.

Medium

A medium button size.

Large

A large button size.