Components

Overlays

Pair .wckd-overlay (trigger) with the adjacent .wckd-overlay-content panel. wckd-ui.js handles backdrop, Escape, and injected close. Optional data-overlay-group wires gallery prev/next. Confirmations: role="alertdialog" (or role="dialog" aria-modal="true" or .wckd-alertdialog) + .wckd-alertdialog-actions; secondary type="button" there auto-closes unless marked data-wckd-overlay-primary.

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

Single overlay trigger

Trigger is the immediate previous sibling of .wckd-overlay-content. Prefer <button type="button" class="wckd-overlay">; use <a href> only for real navigation targets.

Overlay body

Preview content inside the panel.

Markup

<button type="button" class="wckd-overlay button">Open overlay</button>
<div class="wckd-overlay-content">
  <div class="pad">Overlay body</div>
</div>

Configuration options

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

Confirmation (alert dialog)

Add role="alertdialog" (or role="dialog" aria-modal="true" or .wckd-alertdialog) for modal focus + Tab trap. Label with aria-labelledby / aria-describedby. Put actions in .wckd-alertdialog-actions; add data-wckd-overlay-primary on the commit button if the panel must stay open during async work. Optional: data-wckd-dialog-initial-focus, data-wckd-overlay-dismiss outside the row.

Delete this item?

This cannot be undone.

Markup

<button type="button" class="wckd-overlay button">Delete item</button>
<div class="wckd-overlay-content padded rounded" role="alertdialog" aria-labelledby="del-title" aria-describedby="del-desc">
  <div class="pad">
    <h2>Delete this item?</h2>
    <p>This cannot be undone.</p>
    <div class="wckd-alertdialog-actions">
      <button type="button" class="button outline text">Cancel</button>
      <button type="button" class="button fill-dark">Delete</button>
    </div>
  </div>
</div>

Grouped gallery overlay

Same <code>data-overlay-group</code> on each panel enables prev/next between them.

Gallery A

Use next/previous arrows to move across the group.

Gallery B

Second panel in the same overlay group.

Markup

<button type="button" class="wckd-overlay button">Open A</button>
<div class="wckd-overlay-content" data-overlay-group="my-group">...</div>
<button type="button" class="wckd-overlay button">Open B</button>
<div class="wckd-overlay-content" data-overlay-group="my-group">...</div>

Alert dialog optional hooks

Default: type="button" in .wckd-alertdialog-actions closes after handlers unless data-wckd-overlay-primary. Add data-wckd-dialog-initial-focus when the first control should not take focus. data-wckd-overlay-dismiss still works outside the row.

Optional hooks

Delete has data-wckd-overlay-primary so this panel does not auto-close on that click. Initial focus targets Delete via data-wckd-dialog-initial-focus.

(data-wckd-overlay-dismiss).

Markup

<button type="button" class="wckd-overlay button">…</button>
<div class="wckd-overlay-content padded rounded wckd-alertdialog" aria-labelledby="adv-title" aria-describedby="adv-desc">
  <div class="pad">
    <p><button type="button" class="button text" data-wckd-overlay-dismiss>Text dismiss</button></p>
    <div class="wckd-alertdialog-actions">
      <button type="button" class="button outline text">Cancel</button>
      <button type="button" class="button fill-dark" data-wckd-overlay-primary data-wckd-dialog-initial-focus>Delete</button>
    </div>
  </div>
</div>

Nested overlay panels

Inner pair uses the same sibling rule; Escape closes innermost first.

Outer panel

Open a nested panel from inside this surface.

Nested panel

Escape or the close control dismisses this layer first; the outer panel stays open until you close it.

Markup

<button type="button" class="wckd-overlay button">Open outer</button>
<div class="wckd-overlay-content padded rounded">
  <div class="pad">…</div>
  <button type="button" class="wckd-overlay button">Open nested</button>
  <div class="wckd-overlay-content padded rounded">…</div>
</div>

Right flyout panel

Add <code>flyout</code> on the panel for a right-edge sheet.

Right flyout

Slides in from the right edge.

Markup

<button type="button" class="wckd-overlay button">Open right flyout</button>
<div class="wckd-overlay-content flyout">...</div>

Top slide-in panel

Add <code>flyout-top</code> on the panel for a top sheet.

Top flyout

Slides in from above the viewport.

Markup

<button type="button" class="wckd-overlay button">Open top panel</button>
<div class="wckd-overlay-content flyout-top">...</div>

When to use

  • Confirmations, lightboxes, and nested “drill” panels.
  • Flyouts for contextual actions without a full route change.

Implementation notes

  • <a class="wckd-overlay" href="/real-url"> is valid when the trigger should navigate without JS; avoid href="#".
  • Trigger must be the immediate previous sibling of .wckd-overlay-content; wrapping both in extra divs breaks the contract.
  • Modal panels: runtime restores focus to the opener on close; do not move focus away on close unless you replace that behaviour yourself.
  • Gallery: matching data-overlay-group on sibling panels enables injected prev/next.

Developer checklist

  • Keep .wckd-overlay / trigger and .wckd-overlay-content as adjacent siblings.
  • Confirm Escape, backdrop click, and focus return for modal panels.
  • For alert layouts: role="alertdialog" (or dialog + aria-modal="true" or .wckd-alertdialog) + labelled headings + .wckd-alertdialog-actions.

← All components