DesignDojo
1.2-components · 13-button

Estimated time: 6 min

PrimarySecondaryDestructive
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.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Text Input