Button Hierarchy

Three tiers keep green reserved for the single most important action per screen.

Primary

default

The one action users should take. Green fill, white text.

One per screen section. Never use two primaries side by side.

Disabled:

Secondary

outline

Supporting actions. Neutral border, no green fill.

Follow, Share, Invite — actions that complement the primary.

Disabled:

Tertiary

ghost

Low-emphasis actions. Text only, subtle muted hover.

Cancel, Maybe later, Skip — actions that shouldn't compete.

Disabled:

Rule of thumb

If two green buttons appear in the same view, one is wrong. Ask: which action matters most? That one stays primary. The other becomes secondary (outline) or tertiary (ghost). Destructive actions (delete, remove) always use the destructive variant regardless of hierarchy.