Buttons Style Guide

The single highest-priority action in a region. Avoid placing two Accent 01 buttons beside each other.

Friendly Name

Accent 01 — Primary Action

GUID

8a17b3e1-0201-4d24-9a71-000000000201Copy GUID

Use in

Submit, Save, Create, Publish, Continue

.ta-button--primary { border-color: var(--theme-accent); background: var(--theme-accent); color: #fff; box-shadow: 4px 4px 0 rgb(from var(--theme-accent) r g b / .36); }

A normal supporting action on a dark surface. Pair with Accent 01 when both actions are necessary.

Friendly Name

Dark 01 — Secondary Action

GUID

8a17b3e1-0202-4d24-9a71-000000000202Copy GUID

Use in

Cancel Alternatives, Utility Actions, Secondary Navigation

.ta-button--secondary { border-color:#4d5056; background:#1b1c1f; color:#d7d9dd; }

An action that needs visibility without taking priority from Accent 01.

Friendly Name

Outline 01 — Bordered Action

GUID

8a17b3e1-0203-4d24-9a71-000000000203Copy GUID

Use in

Download Alternatives, Start-Over, Add Supporting Item

.ta-button--outline { border-color: var(--theme-accent); background: transparent; color: var(--theme-accent-copy); }

A low-emphasis action such as dismiss, clear, or return. It should not look like the primary path.

Friendly Name

Ghost 01 — Quiet Action

GUID

8a17b3e1-0204-4d24-9a71-000000000204Copy GUID

Use in

Clear, Dismiss, Back, Close

.ta-button--ghost { border-color: transparent; background: transparent; color: #b5b7bc; }

Reserved for deletion, deactivation, or irreversible actions. Pair with plain-language confirmation.

Friendly Name

Danger 01 — Destructive Action

GUID

8a17b3e1-0205-4d24-9a71-000000000205Copy GUID

Use in

Delete, Deactivate, Revoke

.ta-button--danger { border-color: var(--theme-accent-border); background: var(--theme-accent-surface); color: var(--theme-accent-copy); }

A square control for an obvious icon action. Always include an aria-label and title.

Friendly Name

Icon 02 — Compact Action

GUID

8a17b3e1-0206-4d24-9a71-000000000206Copy GUID

Use in

Calendar Navigation, Close, Copy, Small Toolbars

.ta-button--icon { width: 44px; min-height: 44px; padding: 0; }

Disabled controls remain recognizable but clearly unavailable. Do not rely on opacity alone to explain why.

Friendly Name

State 01 — Disabled

GUID

8a17b3e1-0207-4d24-9a71-000000000207Copy GUID

Use in

Unavailable or Incomplete Actions

.ta-button:disabled { opacity: .5; cursor: not-allowed; transform: none; }

Keep the action label understandable while work is in progress. Disable the control and show the shared spinner.

Friendly Name

State 02 — Processing

GUID

8a17b3e1-0208-4d24-9a71-000000000208Copy GUID

Use in

Saving, Sending, Uploading, Transcribing

.ta-button__spinner { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ta-spin .75s linear infinite; }

Align related actions in one flexible row. Every button in the row uses the same size modifier.

Friendly Name

Group 01 — Action Row

GUID

8a17b3e1-0209-4d24-9a71-000000000209Copy GUID

Use in

Form Footers, Modal Footers, Record Actions

.ta-button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }