Button hierarchy

Use button hierarchy when a view, card, or dialog has more than one action. Different styles by importance let people see immediately which action to take first.

The three levels

• Primary — the most important action in the view. At most one per view or card. A filled button in the brand colour. Save, Create trigger.
• Secondary — an alternative to the primary. A view can have several; group related ones. An outlined button. Cancel, Save as draft.
• Tertiary — the lowest-priority supporting action. Rendered as a link, not a button, so it carries less visual weight. Learn more, Do this later.

Alignment

• Regular views — left-aligned, primary first (leftmost). Keep the order fixed: primary → secondary → tertiary.
• Table rows — right-aligned. This separates content from actions and makes the action column scannable down the rows.

Rules

• Only one primary button per view. Several side by side makes it impossible to tell which one matters (Practical UI, ch. 8).
• Don't rely on colour alone for hierarchy. Filled, outlined, and link styles differ in shape as well as colour, so the hierarchy survives greyscale and colour blindness. See accessibility.
• Add only the actions you need. Start with the primary and add others only when genuinely needed.
• Label with a verb, in sentence case — see UI text.

Icon-only buttons

The exception to the hierarchy above. Use one only when:

• there isn't enough space for a text label, or
• the action is universally recognisable from the icon alone — copy, export, save.

Never icon-only without an accessible name.