Components

Buttons

The button element is styled by the element selector in wckd-ui.css, do not add .button on native buttons. Use .button on other hosts (usually an a.button link) so they share the same layout, hover, active, and focus behaviour. Default sizing uses font-size: inherit, min-height: 2.75rem (44px), flex alignment, and column-gap for label plus icon. Optional .size-xxs through .size-xxl step height and type. Modifiers .outline, .text, .size-*, and palette swatches work on either button or .button. Filled default uses --button-bg and --button-text; .icon-button is a 44px square (36px / 60px with .size-s / .size-l).

Jump to:

Download & setup

Download WCKD UI Style guide

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing 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

Start from the default implementation, then apply one of these intent-driven variations based on your content and interaction goals.

Label and icon

Put the icon in <span class="wckd-icon"> (or your own wrapper); default flex layout and gap space it from the copy. wckd-icon sizes from its container, so you do not need size-* on the icon when the button or parent is already size-s and up. For a trailing icon, add .icon-right to the control.

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 is border-only on a transparent track; hovers and active states keep the background transparent. .text uses the same colours and hover as links (--link-color, --link-hover-color, underline on hover): minimal chrome that reads like an inline link, including inherited font weight.

Markup

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

Sizes

Optional .size-xxs through .size-xxl step type and padding together. Omit the size class for the default (primary) scale.

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

  • Default <a> links use a:hover:not(.button) for link colour and underline, so <a class="button"> is excluded and only gets button hover: an inset fill using var(--background-color-fade) (no link colour). nav .wckd-menu / .wckd-menu links are further overridden to body colour with no underline.
  • Selectors are paired as .button and button in wckd-ui.css so behaviour matches; native <button> does not need the .button class, use that class on <a>, <span role="button">, or similar when a real button element is not appropriate.
  • Default filled controls use neutral tokens (--button-bg from --background-color-light, text from --text-color); use palette swatch classes (.red, .blue, …) when you need semantic colour. Brand tinting is via --primary-color elsewhere, not the default button fill.
  • Sizing: default .button / button use min-height: 2.75rem (44px) and font-size: inherit; .size-* classes set stepped min-height and font size. Icon-only: search for .icon-button (44px default; 36px / 60px with .size-s / .size-l).
  • Buttons define :focus and :focus-visible with outline / outline-offset for a visible keyboard ring.
  • .outline / .text have extra rules so the inset hover/active overlays do not fight their transparent style. .text matches global link colour, hover colour, and underline, with font-weight: inherit and inline-flex / gap like a.

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