Component Card

Button

Trigger deliberate actions with clear hierarchy and state feedback.

Button anatomy

When to Use

Form submission actions like save, create, and confirm.
In-context operations that mutate data in the current view.
Primary call-to-action moments where one next step should stand out.

When NOT to Use

Use one dominant primary button per section and keep secondary actions visually quieter.

For navigation to another route, use a link or nav item instead of a button.

Variants

Primary / secondary

Destructive

Disabled / loading

Confused?

Use Button to trigger behavior, and use Badge only for labeling state.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Create primary, secondary, and destructive buttons with hover, active, disabled, and loading states using one consistent sizing system.

Pencil Prompt

Lay out a button state gallery showing primary action hierarchy and disabled/loading behavior for form submission.

Next Lesson

Text Input