Components / Actions / ButtonOpen in Figma

Button

Ready

Starts the one main action on a screen, or records a decision.

Platforms Phone · TabletGroup ActionsUpdated 26 Oct 2026

When to use

  • The screen has one main thing to do: save, submit, continue, confirm.
  • A person must decide on a request: Approve and Reject together.
  • A pair of equal choices at the foot of a filter or sheet: Outline beside Main, both compact.

When not to use

If people need toUse
Add a new record from a listAdd button
Reach second and later actionsMenu
Switch between views of the same listSecondary tab
Confirm something that can't be undoneConfirm

Anatomy

check_circleAction
Action
  1. Container · required
  2. Icon · optional, before the label, 24
  3. Label · required
  4. Outline container · for the quieter of two choices

Variants

VariantPurposeFigma
MainThe one main action on a screen. Antz green, 56 tall, full width of the action barDesigned
NavyA call to action that is not the main step of the flow, such as Add results beside a status. Teal ink fillDesigned
Approve and rejectThe decision pair on a request, 48 tall. Stacked on phone, side by side on tabletDesigned
OutlineThe quieter of two choices, such as Cancel or Clear allDesigned
CompactButtons 40 tall in tight footers, such as a filter screenDesigned

States

StateWhenWhat changesFigma
DefaultReady to useAs specifiedDesigned
PressedFinger is downA 10% black layer over the fillTemporary rule
FocusReached with a keyboard on tablet2px Teal ink ring, 2 outside the edgeTemporary rule
DisabledThe action can't be taken yetDisabled fill #DAE7DF, label in Hint #839D8D; outline keeps its white fill and grey borderTemporary rule

Behaviour

  • One main action per screen. Every other action goes in the menu behind the more icon.
  • The main action sits in a white bar fixed to the bottom of the screen, 16 padding on phone and 20 on tablet.
  • Reject always asks for a reason before it completes.
  • A button that can't be used yet shows as disabled rather than disappearing, so the layout does not jump.
  • Delete never sits in red beside Edit; it lives in the menu and asks for confirmation.

Phone and tablet

PhoneTablet
Main button widthFull width of the action barFull width of the action bar or panel
Approve and rejectStacked, Approve on top, gap 12, in a white bar with corners 16 on topSide by side, equal widths, Reject left, gap 24
Action bar padding1620

Content

PartRule
LabelA verb, or verb and noun, in sentence case: "Save", "Submit request"
LengthOne to three words; never wraps to a second line
Decision pairAlways "Approve" and "Reject"
Avoid"OK", "Yes", "Click here", all capitals

Do and don't

Action
DoGive the screen one main action.
Action
Action
Don'tStack two main buttons. Move the second one into the menu.
Cancel
Save
DoPair an outline button with the main one when both choices matter.
Delete
Edit
Don'tPut a red Delete beside Edit.
Add buttonMenuConfirmForm layout
← Segmented controlAdd button →