Button
Trigger actions with a single click.
Installation
pnpm add @base-ui/reactExamples
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.
Link
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.