Primary
The main action of a screen — only one per view.
Secondary
An alternative action next to a primary one — uses gray instead of a brand color.
Positive
Confirms, validates, or signals success.
Negative
Cancels or deletes — a destructive or irreversible action.
Tertiary
Low-priority action (e.g. "learn more") — text only, neutral gray.
Best practices
Only one "primary" per view
If there are several buttons on the same screen or card, only one should carry the full "primary" color. The other actions become secondary, outline, or tertiary — otherwise the user no longer knows which action is really recommended.
"Negative" ≠ just any brand color
The "negative" role (permanently delete, cancel) should stay reserved for truly destructive actions. Using it for a harmless "cancel" button on a routine form would train the eye to read this color as neutral, and it would lose its warning signal on the day the action is genuinely irreversible.
Type the type attribute
A <button> without a type attribute defaults to type="submit", which can accidentally submit a form. All buttons on this page are explicitly type="button"; only the actual submit button of a form should carry type="submit".