Button

A button is a UI control that triggers an instantaneous action. It is distinct from state buttons, which toggle persistent state. Allow one primary action per panel; primary labels should be verbs.

Style variants

Variant	Usage
Primary	Main panel action — Launch, Apply, Add; may close panel or start long processing
Secondary	Subsection actions; shorter height; may open settings dialogs
Tertiary	Adjacent to a related control — Browse, Reset
Outline	Brand-linked optional actions when primary is already used — Preview, Save draft, Test connection

Primary button

Primary buttons use a solid brand fill and white label. They represent the main commit action for a panel — only one primary button should appear per panel.

When to use

• The single main action that completes or commits work in a panel — Launch, Apply, Save.
• Confirming irreversible actions in dialogs when paired with a secondary dismiss control.
• Starting long-running or blocking operations the user explicitly requested.

When not to use

• More than one primary button in the same panel or dialog footer.
• Cancel, dismiss, or optional preview actions — use secondary or outline.
• Inline helpers beside a single field — use tertiary.
• Navigation or help — use a link button.

With icon

Primary buttons can include a leading icon when the glyph reinforces a familiar create-or-send action. Default to text-only for dialog footers and confirmations; add an icon when it improves recognition without replacing the label.

When to use an icon

• Create or add entry points where a plus or upload icon matches user expectations — Add, Upload, New.
• Empty-state or onboarding CTAs where one primary action needs extra visual emphasis alongside the verb.
• Actions tied to a well-known glyph used consistently elsewhere in the product (export, download, share).
• First-time flows where the icon clarifies an action the label alone might not convey quickly.

When not to use an icon

• Dialog and panel footers for commit or confirm actions — use text-only Launch, Apply, Delete.
• When the verb is already clear and the icon would be decorative.
• When horizontal space is limited — use an icon-only primary button with aria-label instead.
• More than one primary button in the same panel, with or without icons.

Panel footers: one primary on the right; label should be a verb describing the outcome.

Secondary button

Secondary buttons use a neutral filled background and gray border. They support subsection actions, settings entry points, and dismiss controls without competing with the primary action.

When to use

• Dismiss, cancel, or close alongside a primary action in dialog and panel footers.
• Subsection actions that open settings or secondary dialogs.
• Neutral actions where a filled control is needed but brand emphasis is not.

When not to use

• The main commit action for a panel — use primary.
• Brand-linked optional actions when primary is already used — use outline.
• Actions tight to one input — use tertiary.

Secondary is shorter (24px) than primary (28px); dismiss sits left of primary in the footer cluster.

Tertiary button

Tertiary buttons have no fill or border by default. They sit beside a related control for lightweight, contextual actions such as browsing for a file or resetting a single field.

When to use

• Actions directly adjacent to the control they affect — filename field + Browse.
• Reset or clear for a single setting without opening a dialog.
• Low-emphasis actions where primary, secondary, or outline would add too much weight.

When not to use

• Panel-level commit or dismiss actions — use primary or secondary.
• Brand-linked optional actions — use outline.
• When the action needs a visible border for discoverability on busy backgrounds — use outline or secondary.

Tertiary controls align on the same row as their related input; hover adds a neutral fill.

Outline button

Outline buttons use a transparent fill and brand-colored border. They signal a positive, on-brand action without competing with the single primary button in a panel.

When to use

• A second positive action when the panel already has a primary button (e.g. Apply + Preview).
• Reversible or exploratory actions on busy or tinted surfaces where a filled secondary feels too heavy.
• Optional actions in empty states or toolbars where several related actions need equal weight.

When not to use

• Cancel, dismiss, or close — use secondary.
• Actions tight to a single input — use tertiary (e.g. filename + Browse).
• The main commit action for a panel — use primary.
• Help or navigation — use a link button.
• More than two action tiers in one footer — prefer primary + secondary or primary + outline only.

Icon button

Icon-only buttons save space for familiar actions (Save, Add, Settings). Always provide an accessible name via aria-label or visually hidden text.

• Use 16px Font Awesome icons inside 28px primary / 24px secondary hit targets.
• Pair icon + text when the action is ambiguous or first-time.

Link button

Link buttons look like hyperlinks but use <button> semantics for in-app actions that do not navigate. For true navigation, use Hyperlinks.

Link icon button

Combines link appearance with a leading icon — common for help topics and external docs opened in context.

Split button

A split button pairs a primary action with a menu of related alternatives. The main area runs the default action; the chevron opens a dropdown.

With icon

Add a leading icon on the main action when the glyph aids recognition — export, save, share. The chevron toggle stays icon-only; always provide an aria-label on the toggle.

• Default action must match the most common user choice.
• Menu items use the same labels as a standard Dropdown action menu.
• Use 16px Font Awesome icons; same sizes as standard icon buttons.
• Prefer icon + text on the main action when space allows; icon-only main area only for familiar actions.

Button group

Visually joins related options so users pick one of a small set (view mode, alignment, sort order).

• Use for 2–5 mutually exclusive options; more than five — use a dropdown.
• Mark the selected option with aria-pressed="true" or .is-active styling.
• Shared outer corners only — inner borders collapse between segments.

Color tokens

Button colors match the palette on the Color foundation page. Values below are fixed hex references; live buttons use CSS custom properties that adapt with theme.

Variant	Background (light / dark)	Text (light / dark)
Primary	#2967c4 #395386	Aa #ffffff Aa #ffffff
Primary hover	#2358a7 #2967c4	Aa #ffffff Aa #ffffff
Secondary	#f1f1f1 #474747	Aa #000000 Aa #ffffff
Secondary hover	#e6e6e6 #525252	—
Tertiary	transparent transparent	Aa #000000 Aa #ffffff
Outline	transparent transparent	Aa #2967c4 Aa #6ea8fe
Outline hover	rgba(41, 103, 196, 0.1) rgba(110, 168, 254, 0.12)	Aa #2358a7 Aa #9ec5fe
Disabled	#f1f1f1 #474747	Aa #a0a0a0 Aa #525252

State matrix

Each variant is shown in default, hover, focus, and disabled states. Light and dark panels render side by side; use the header theme toggle to preview either mode full-page.

State reference

State	Primary	Secondary	Tertiary	Outline
Default	Brand background, white label	Neutral fill, gray border, theme text	Transparent, no border	Transparent, brand border and link-colored label
Hover	Darker blue (light) / lighter blue (dark)	Secondary hover fill	Neutral hover fill	Light brand tint fill; darker border and label
Focus	2px primary outline, 2px offset — all variants
Disabled	Neutral gray fill and muted label	Muted label on neutral fill	Muted label; stays transparent	Muted label and border; stays transparent

Appearance

• Button height ≈ 2% of vertical monitor resolution (~20–35px at 1080p, ~40–60px at 4K).
• Primary: brand blue background, white text; disabled uses neutral gray background.
• Secondary: neutral fill and gray border; tertiary: transparent with no border.
• Outline: transparent fill, brand border, link-colored label; hover adds a light brand tint.
• Include text when space permits; icon-only for standard actions (Browse, Save) when space is limited.
• Icons + text when the button may collapse to icon-only or the icon needs definition.

Usage guidelines

• Only one primary button per panel.
• Primary button text should be a verb; prefer text-only in dialog footers — use a leading icon only where noted under Primary button with icon.
• Secondary buttons align with other controls in a subsection; use for dismiss and neutral actions.
• Outline buttons suit optional brand-linked actions when primary is already assigned.
• Tertiary buttons sit beside their related control (e.g. filename + Browse).
• Help links use hyperlink appearance, not button styling.

Platform-specific button catalogs for desktop, web, and portal products are deferred from this unified spec — report back if those should be merged later.