Buttons
Tiffinbox's checkout screen has four filled orange buttons: "Apply coupon", "Add tip", "Change address" and "Place order". They all shout equally loudly, so none of them stands out. Customers hesitate, and a few tap "Change address" by mistake. Buttons are the first component most systems define, because every screen has them and every screen needs them ranked.
The rule
One primary action per view; everything else steps down.
Thali defines four levels of emphasis:
- Primary. Filled with the action colour. The single most important action in a view, such as "Place order". One per screen, or one per dialog or clearly separate panel.
- Secondary. Outlined or lightly tinted. A real alternative that matters less: "Apply coupon".
- Tertiary. Text only, lowest emphasis. Small actions such as "Change address" or "Add tip".
- Destructive. Red, for actions that delete or cannot easily be undone. It usually leads to a confirmation step.
Every button also needs its states: default, hover, a clearly visible keyboard focus ring, pressed, loading and disabled. Its label follows the writing guidelines: a verb and a noun, in sentence case. Its size comes from the scale, and its tappable area meets touch-target guidance.
One structural rule matters as much as the looks: buttons do things; links go places. An action uses a button element. Moving to another page uses a link, even when it is styled like a button:
<button class="thali-button thali-button--primary">Place order</button>
<a class="thali-button thali-button--tertiary" href="/menu">Back to menu</a>Screen readers announce the two differently, and keyboard users expect them to behave differently.
Be careful with disabled buttons. A greyed-out "Place order" with no explanation leaves people stuck. Either explain what is missing next to it, or keep it enabled and show a helpful message when it is pressed.
The shortcut
Ask "What is the one thing this screen is for?" That action gets primary. Rank the rest by how often people need them, and give each the next level down.
The one thing
Checkout exists to place the order. "Place order" becomes primary.
Drills
Answer fast — trust the rule.
How many primary buttons should a typical checkout screen have?
A "View menu" control takes the user to another page. Which element should it be?
Which level fits "Delete saved address"?
"Place order" is disabled with no explanation. What is the problem?
Remember
- One primary action per view; secondary, tertiary and destructive step down from it.
- Shortcut: ask "what is the one thing this screen is for?" That action is primary; rank the rest below it.
- Traps: several primary buttons fighting, links pretending to be buttons, and unexplained disabled buttons.