Button
Actions with consistent emphasis, sizing, and keyboard behavior.
Preview
Installation
Add Button to a shadcn-initialized Radix project with Tailwind CSS 4.3+:
pnpm dlx shadcn@latest add http://127.0.0.1:3017/r/button.jsonYour project owns the installed source. Existing theme colors are preserved. The endpoint is a local development snapshot; see the registry guide for the optional theme and reviewed updates.
Usage
import { Button } from '@/components/ui/button';
<Button>Save changes</Button>
<Button variant="outline">Cancel</Button>Import from your project’s configured UI directory.
Variants
| Variant | Use |
|---|---|
default | Primary action within a task region |
outline | Secondary action beside a primary action |
secondary | Subdued filled action |
ghost | Low-emphasis utility |
destructive | Destructive action |
link | Link-like visual treatment; use link semantics for navigation |
Sizes and disabled state
| Size | Height | Radius |
|---|---|---|
sm / icon-sm | 24px | 3px |
default / icon | 32px | 4px |
lg / icon-lg | 44px | 6px |
Icon-only controls are square and need accessible names.
Typography and spacing
Labels use Inter with medium weight. Small buttons use 12px text with a 16px line height, matching small inputs and input groups. Default and large buttons use 14px text with a 20px line height. Horizontal padding is 12px for small, 16px for default, and 24px for large. Buttons with icons use 10px, 12px, and 16px respectively. Icon-only buttons stay square. No decorative shadows are applied in any state.
Interaction states
The specimens below pin the real hover, pressed, and keyboard-focus styles so you can compare them without holding the pointer. Regular buttons above remain interactive. Focus uses a solid 2px outline with a 2px offset, rather than a shadow.
| Variant | Default | Hover | Pressed | Focus | Disabled |
|---|---|---|---|---|---|
| default | |||||
| outline | |||||
| secondary | |||||
| ghost | |||||
| destructive | |||||
| link |
The primary fill keeps your supplied blue in both themes. Link text uses a separate, brighter token in dark mode. Destructive buttons use a light label in light mode and a dark label on the lighter red fill in dark mode.
Loading
Compose a Spinner with disabled and aria-busy. Preserve the button width and use a visible progress label. This example simulates a short operation locally.
Demo only. No data is sent.
<Button disabled aria-busy="true">
<Spinner data-icon="inline-start" aria-hidden="true" />
Saving changes
</Button>Icons
Use icons to reinforce an action. Icon-only buttons need an accessible name; tooltips may provide supplemental help. The component sizes icons and spinners automatically; examples do not override icon dimensions.
| Control height | Icon beside text | Icon-only button |
|---|---|---|
| Small · 24px | 14px | 14px |
| Default · 32px | 16px | 16px |
| Large · 44px | 16px | 20px |
The icon size is separate from the clickable control size. Standalone Spinner defaults to 16px and inherits the containing control’s icon size when composed inside it.
See the Icons foundation for the shared scale, spacing, and accessibility guidelines.
Keyboard behavior
Tab moves focus to the button. Enter or Space activates an enabled button. Disabled buttons cannot be activated. Use buttons for actions and links for navigation.