Button
You might say
Add a button that saves the content when someone clicks it.
Click to save, submit, delete, or run another actionA button runs an action on the current page, such as saving a form, creating a project, or confirming a deletion. Use a Link to move somewhere else. When several buttons appear together, make the main action easy to spot.
You can say this to an AI Agent
Clarify the account settings page: give save profile, discard edits, and delete account their own buttons, with confirmation before delete; keep Reset password as a link. Do not change layout. Trigger save, discard, and delete confirmation, and confirm saving cannot be submitted twice.
Anatomy
The full clickable area, available in primary, outline, and danger styles
Optional; reinforces the action. Icon-only buttons need an accessible name and a tooltip when their meaning is not obvious
Starts with a verb and says exactly what happens on click
Variants
Primary
One per screen, reserved for the most important action
Outline
For step-back actions like cancel or go back
Text
The lightest actions — expand details, collapse
Danger
Only for irreversible actions like delete or clear
Loading & Disabled
While submitting or when requirements aren't met — blocks double clicks
Typical use cases
Sign-in form
Welcome back
Delete confirmation
Empty project state
No projects yet
Create your first project and start collaborating
File toolbar
Project files
📄 homepage-redesign.fig2 hours ago
📄 design-guidelines.mdYesterday
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check