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.

Forgot passwordCreate an account

Quick checkChoose the best answer

An account settings page has save profile, discard edits, delete account, and reset password. What is the clearest arrangement?

Use buttons for save, discard, and delete; keep reset password as a link and confirm deletionMake save, discard, delete, and reset password all navigation linksUse one Confirm button for every operation and infer the intent afterward

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.

Button≠Segmented

Button runs an action when clicked. Segmented shows which one of several mutually exclusive options is selected, usually to switch a view or mode.

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

Delete this project?

This can't be undone. Please proceed with care.

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