Components

Buttons

Native <button> is styled by the element selector in wckd-ui.css. Do not add .button. Add .button (and modifiers) on <a href> or other hosts that should look like a button. Sizes: .size-xxs–.size-xxl; icon-only: .icon-button. Palette: .red, .blue, etc. Details: style guide.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Native button and link as button

Use <button type="button"> for actions (omit the redundant .button class). Use <a class="button"> when you need navigation with button chrome.

Continue

Markup

<button type="button">Save</button>
<a class="button" href="#">Continue</a>

Configuration options

Each variant keeps the same markup contract as the default; add only the classes or attributes named in the heading.

Label and icon

Put the icon in <span class="wckd-icon" aria-hidden="true">; add .icon-right on the control for a trailing icon.

Markup

<button type="button">
  <span class="wckd-icon" aria-hidden="true">
    <svg ...></svg>
  </span>
  New item
</button>
<button type="button" class="icon-right outline size-s">Next
  <span class="wckd-icon" aria-hidden="true"><svg ...></svg></span>
</button>

Outline and text

.outline = bordered ghost; .text = link-coloured minimal control.

Markup

<button type="button" class="outline">Cancel</button>
<button type="button" class="text">Learn more</button>

Sizes

Optional .size-xxs–.size-xxl; omit for default height.

Markup

<button type="button" class="size-s">Compact</button>
<button type="button">Default</button>
<button type="button" class="size-l">Large</button>

Palette fills

Add a swatch class (.red, .blue, .yellow, …) on the same element. Yellow and beige keep dark label copy from the global palette rules; other swatches assume light text.

Markup

<button type="button" class="red">Delete</button>
<button type="button" class="green">Confirm</button>

Icon-only

.icon-button is a square control: 44px by default, 36px with .size-s, 60px with .size-l. Always set aria-label (or visible text) because the target is icon-only.

Markup

<button type="button" class="icon-button round-xl" aria-label="Settings">
  <svg>...</svg>
</button>

Disabled

Use the disabled attribute or .disabled for non-interactive presentation. Prefer disabling the real control instead of only dimming with CSS.

Markup

<button type="button" disabled>Unavailable</button>

When to use

  • Primary and secondary actions in forms, dialogs, and page headers.
  • Pill or toolbar rows where .size-s / .icon-button keep density without swapping to a different component system.
  • Destructive or semantic colour when paired with copy and layout that explain the action, not colour alone.

Implementation notes

  • Native <button> and <a class="button"> share hover/active/focus rules in wckd-ui.css; plain links keep underline styling separately.
  • Prefer <button type="button"> or <a href="…" class="button">; avoid role="button" on non-buttons unless you ship full keyboard support.

Developer checklist

  • Load wckd-ui.css (buttons are not in wckd-ui-components.css). No script is required for default hover, active, and focus-visible styles.
  • Do not add .button to <button>, it is redundant. Add .button (plus modifiers) on <a href="…"> or other hosts that should look like a button.
  • Pair icon-only controls with aria-label or screen-reader text; keep hit areas at least 44px for primary actions unless you intentionally use .size-s.
  • For forms, use <button type="submit"> for the primary action and type="button" for everything else to avoid accidental submits.

← All components