Button

Buttons should be used in situations where a user might need to preform an action

Accessible button components and styling guidelines.

Markup

<button class="ds-button">Primary action</button>

@wmcadigital/ui-button

Button styles and small UX helpers used across the design system. The package provides a flexible .ds-btn block, icon support, and multiple modifiers for variants, alignment, and disabled states.

Install

pnpm add @wmcadigital/ui-button

What this package provides

• Compiled CSS: dist/styles/main.css (declared in the package style field).
• SCSS source: src/styles/main.scss (imports loader and design token helpers).
• A robust .ds-btn block with modifiers for colour, sizing, alignment, and behaviour.

Basic markup

<button class="ds-btn">Primary action</button>

Iconed button example:

<button class="ds-btn">
  <svg class="ds-btn__icon ds-btn__icon--left" aria-hidden="true" width="22" height="22">
    <use href="#icon-add"></use>
  </svg>
  Save
</button>

Common modifiers

• .ds-btn--primary — primary colour variant.
• .ds-btn--secondary — bordered/secondary variant (also supports .ds-btn--dark-bg for dark backgrounds).
• .ds-btn--destructive — destructive/error action style.
• .ds-btn--start — success-style variant (uses success colour token).
• .ds-btn--mode — specialised mode buttons with coloured icons (bus/train/etc.).
• .ds-btn--dark-bg — invert colours for use on dark backgrounds.
• .ds-btn--favourite — minimal, icon-focused button.
• .ds-btn--block — full width button.
• .ds-btn--link — render like a textual link.
• .ds-is--active — utility class for active state styling.

Alignment helpers:

• .ds-text-align-left, .ds-text-align-center, .ds-text-align-right — control inline alignment.

Icon helpers:

• .ds-btn__icon--left and .ds-btn__icon--right — spacing for icons.
• .ds-swift-logo-inline — helper to style an inline logo/responsive icon.

Disabled states:

• Disabled modifiers and selector patterns are included (e.g. .ds-btn--disabled:disabled) and should be applied to the native disabled attribute where appropriate.

Accessibility

• Always provide an accessible label for buttons (visible text or an accessible name via aria-label).
• Use the native type attribute on button elements (button, submit, reset) to avoid unexpected form submissions.
• The styles include visible focus states — ensure you maintain focus visibility if you customise the CSS.

Customisation

• Colours, spacing and tokens are driven by the design system (get-color(...) helpers and SCSS variables). Override variables or apply utility classes to match your theme.
• The package imports @wmcadigital/ui-loader — the loader integration allows placing a spinner icon inside buttons when needed.

Development

• Source: src/styles/main.scss.
• Build from the repo root to regenerate dist/:

pnpm -w -r run build

• Linting:

pnpm -w -r run lint