Button

Overview

Use a button to trigger an action or event — submitting a form, opening a dialog, or confirming a choice. Morpha buttons are pill-shaped and ship with six design-system styles — filled, tonal, outlined, text, elevated and glass — plus destructive and link as practical extras, across a range of sizes.

Examples

Variants

The six styles map to ascending emphasis. filled is the default; glass is translucent and is meant to sit over imagery or a colored backdrop.

States

Every variant shares the same MD3 state layer: an overlay that deepens with emphasis — 8% on hover, 10% on focus and press — drawn over the button without shifting its layout. Pressing also scales the button to 97% for tactile feedback.

Destructive & link

Beyond the six design-system styles, destructive signals a dangerous action and link renders an inline, text-only button.

Sizes

Five sizes scale padding and label together — xs, sm (default), md, lg, xl. xs and sm keep a 44×44 minimum touch target for accessibility even though the pill renders smaller.

Radius

Four shapes via the shape prop: full (pill, default), rounded (12px), squared whose corner radius grows with the button size for a harmonious look, and none.

With icon

Drop an icon before or after the label — the gap spaces it automatically and icons are sized per the button size. Use an icon size for icon-only buttons.

Loading

loading shows a spinner and disables the button; pass loadingText to swap the label while busy.

Disabled

Installation

npx shadcn@latest add button

API Reference

Accessibility

• Renders a native <button>, so keyboard activation and focus handling come for free.
• Icon-only buttons (any icon size) must provide an aria-label describing the action.
• Icons are sized automatically per the button size; the gap handles spacing.
• A visible focus ring (3px accent with a 2px offset) is provided via focus-visible.
• loading sets aria-busy and disables interaction while work is in flight.