Buttons — Tomatico UI Style Guide

Variants

Four variants, in descending order of emphasis. With no accent colour available, the difference between them is fill and border weight — so using more than one primary button on a screen destroys the hierarchy entirely.

Variants

<button class="tmt-btn" type="button">Primary</button>
<button class="tmt-btn tmt-btn--secondary" type="button">Secondary</button>
<button class="tmt-btn tmt-btn--ghost" type="button">Ghost</button>
<button class="tmt-btn tmt-btn--danger" type="button">Delete device</button>

Variant	Class	Use it for
Primary	`.tmt-btn`	The one action the screen exists for. At most one per view — or one per distinct region, such as a dialog.
Secondary	`.tmt-btn--secondary`	The default for everything else. Cancel, Back, and any action that is real but not the point of the screen.
Ghost	`.tmt-btn--ghost`	Dense areas where a border would add noise: table rows, toolbars, card corners, the masthead.
Danger	`.tmt-btn--danger`	Destroying data or triggering something physical and irreversible. The only button that carries colour.

Sizes

Medium is the default and covers nearly everything. Small is for dense contexts; large is for a single standout call to action on a marketing or onboarding screen.

Sizes

<button class="tmt-btn tmt-btn--sm">Small</button>
<button class="tmt-btn">Medium</button>
<button class="tmt-btn tmt-btn--lg">Large</button>

<!-- Full width, for narrow screens and mobile forms -->
<button class="tmt-btn tmt-btn--block">Continue</button>

The small button is 36px tall, below the 44px touch target minimum. Use it only where a pointer is the expected input — an internal data tool, a table's row actions on desktop. On anything a customer touches, use the medium size.

States

<button class="tmt-btn" disabled>Disabled</button>

<button class="tmt-btn" aria-busy="true">
  <svg class="tmt-btn__icon" aria-hidden="true">…</svg>
  <span class="tmt-btn__label">Saving…</span>
</button>

Hover darkens the fill one step; active darkens it again and nudges the button down 1px.
Focus draws a 2px ring in the interactive colour, offset by 2px. It is identical on every control in the system, and it must never be removed.
Disabled uses a muted fill with disabled text. Prefer leaving a button enabled and explaining what is missing when it is pressed — a disabled button gives no feedback and is skipped by some assistive technology.
Busy uses aria-busy="true" and changes the label to a present participle. Keep the button the same width so the layout does not jump.

Icons in buttons

An icon supports a label; it rarely replaces one. Icon-only buttons always carry an accessible name.

With icons

<!-- Leading icon -->
<button class="tmt-btn">
  <svg class="tmt-btn__icon" aria-hidden="true">…</svg>
  <span class="tmt-btn__label">Add a device</span>
</button>

<!-- Trailing arrow: --directional flips it in RTL -->
<button class="tmt-btn tmt-btn--secondary">
  <span class="tmt-btn__label">Continue</span>
  <svg class="tmt-btn__icon tmt-btn__icon--directional" aria-hidden="true">…</svg>
</button>

<!-- Icon only: the name lives in visually hidden text -->
<button class="tmt-btn tmt-btn--ghost tmt-btn--icon">
  <span class="tmt-visually-hidden">Device settings</span>
  <svg class="tmt-btn__icon" aria-hidden="true">…</svg>
</button>

Directional icons must flip in Arabic. An arrow meaning "next" points right in English and left in Arabic. Add .tmt-btn__icon--directional and the system mirrors it under dir="rtl". Icons that are not directional — a gear, a plus, a trash can — must not get the class. Use the RTL toggle above to check.

Destructive actions

Tomatico products control physical things. Deleting a device, revoking access or unlocking a door deserves more than a red button.

Name the consequence in the label: "Delete schedule", not "Delete".
Confirm in a dialog whose confirm button repeats the specific action.
Put the destructive button in the secondary position and the safe choice as primary — the muscle-memory press should be the harmless one.
Offer an undo where the action is reversible, instead of a confirmation.

Delete "Front door lock"?

Its schedules and history will be removed. This cannot be undone.

Confirmation

Grouping and order

Buttons sit in a .tmt-cluster, which wraps rather than overflowing on narrow screens.

Order: the primary action comes last in the visual row in left-to-right reading, so it sits closest to the edge the eye finishes on — and because the layout mirrors, it lands correctly in Arabic without any change. Do not reorder buttons in the markup for RTL; the DOM order is the tab order and it must stay logical.

On narrow screens stack them full width with .tmt-btn--block, primary on top.

Buttons and links are not interchangeable

A button does something on this page. A link goes somewhere. This matters beyond semantics: links open in a new tab on middle click, appear in the browser's history, and are announced differently.

Navigating? Use <a href>. It can still carry .tmt-btn if it needs to look like a button.
Submitting, toggling, opening a dialog? Use <button type="button">.
Never <div onclick>. It is not focusable, not keyboard-operable, and not announced as a control.
Always set type on a button inside a form — the default is submit, which causes surprising submissions.

Do and don't

Do

One primary button per screen.
Start labels with a verb, in sentence case.
Keep the focus ring.
Give icon-only buttons a hidden text label.

Don't

Line up three primary buttons and hope the hierarchy survives.
Use "OK", "Submit" or "Yes" as a label.
Use the danger variant for anything reversible.
Set a fixed width that a longer Arabic or English label will break.