Buttons are the primary means of triggering actions in the Alius interface. They must be immediately recognizable, clearly labeled, and consistently styled across the entire platform.

Button Types

Primary

  • The main call-to-action in any given area
  • Filled background with brand color
  • White or contrasting text
  • Use for the single most important action on the page or section

Secondary

  • Alternative or supporting action
  • Outlined style with brand-colored border and text
  • Transparent or neutral background
  • Use for actions that are available but not the primary focus

Tertiary

  • Low-emphasis action
  • Minimal styling — text-only or ghost-like appearance
  • Use for less important actions, dismiss buttons, or optional steps

Danger

  • Destructive or irreversible actions (delete, remove, reset)
  • Red background (filled) or red text/border (outlined)
  • Must always require explicit user confirmation for destructive operations
  • Never use the danger style for non-destructive actions

Ghost

  • Transparent background with subtle text
  • Used in contexts where a standard button would be visually heavy
  • Becomes visible on hover with a subtle background
  • Use for toolbar actions, inline controls, and dense UI areas
  • Styled to look like a text link but behaves as a button
  • No background, border, or padding — just underlined text
  • Use for secondary navigation actions or inline triggers
  • Reserve for actions that navigate rather than submit

Button States

Default

  • The resting state of the button when no interaction is occurring
  • All button type styles apply to the default state

Hover

  • Visual change to indicate the button is interactive
  • Slight background darkening or lightening
  • Cursor changes to pointer

Active (Pressed)

  • Visual change while the button is being pressed
  • Darker or more prominent than the hover state
  • Provides tactile feedback for the click action

Focus

  • Visible focus ring for keyboard navigation
  • Required for accessibility compliance
  • Use the brand color or a high-contrast outline
  • Must be distinguishable from the hover state

Disabled

  • Indicates the button is not currently actionable
  • Reduced opacity, muted colors
  • Cursor changes to “not-allowed”
  • Include a tooltip explaining why the button is disabled (if not obvious from context)

Loading

  • Shows a spinner or progress indicator within the button
  • Button text may change to a gerund (“Saving…” instead of “Save”)
  • Button is non-interactive during loading
  • Maintains its size to prevent layout shifts

Button Principles

  • One primary action per area — each section or page should have a single clearly dominant button
  • Danger operations must be distinguished — destructive actions must be visually and spatially separated from primary actions
  • Verb-based copy — button labels should use action verbs: “Download”, “Create”, “Delete”, “Save”, “Run”
  • No vague button labels — avoid labels like “Submit”, “OK”, “Done” when a more specific verb is available
  • Consistent sizing — define small, medium, and large button sizes and use them consistently
  • Icon + text — prefer icon and text together; icons alone are acceptable only when space is constrained and the icon is universally understood