Components

Preview

State examples

Usage guidance

• Keep link text specific to the destination instead of repeating “click here.”
• Visited styling is intentional for prose links so readers can tell which references they have opened.
• Never present navigation as disabled; if an action is unavailable, use a button or explanatory text instead.

Copyable examples

<p>
  Read the <a href="#field-specimen-title">field guidance</a>.
</p>

const proseLink = css({
  color: 'accent',
  textDecoration: 'underline',
  textUnderlineOffset: '3px',
  _visited: { color: 'accent.strong' },
})

Preview

State examples

Usage guidance

• Choose links for navigation and buttons for in-page actions or form submission.
• Only persistent toggles should use aria-pressed; one-off actions stay unpressed.
• Disabled buttons should explain why elsewhere when the next step is not obvious.

Copyable examples

<button type="button" aria-pressed="true">
  Sample alerts on
</button>

const actionButton = button({ variant: 'primary' })
const quietButton = button({ variant: 'secondary' })

Preview

State examples

Usage guidance

• Keep every hint and error associated with the field through aria-describedby.
• Error text should explain the fix, not just restate that something is invalid.
• Read-only fields remain focusable and selectable, which helps people copy sample values.

Copyable examples

<label for="site-url">Website URL</label>
<input id="site-url" type="url" aria-invalid="true"
  aria-describedby="site-url-hint site-url-error">
<p id="site-url-hint">Provide a reachable URL.</p>
<p id="site-url-error">Add https:// so the address is complete.</p>

const field = fieldInput()
const invalidField = css({ borderColor: 'critical' })
const successField = css({ borderColor: 'positive' })

Preview

State examples

Usage guidance

• Use switches for immediate preferences, not deferred form submissions.
• A switch needs a visible label plus aria-checked to announce its state.
• Native buttons already support Space and Enter, so role="switch" can build on that behavior.

Copyable examples

<button type="button" role="switch" aria-checked="false"
  aria-labelledby="alerts-label">
  <span class="knob"></span>
</button>
<span id="alerts-label">Email alerts</span>

const switchOff = switchTrack()
const switchOn = switchTrack({ on: true })

Preview

State examples

Usage guidance

• Label examples as samples whenever the page is not showing live application data.
• Pair status color with an icon or word so the meaning survives monochrome and high-contrast modes.
• Match the token to the stakes: info for neutral notes, warning for cautions that do not block, critical only for errors and destructive actions.
• Keep the card body focused on the next action or takeaway instead of reproducing raw scanner output.

Copyable examples

<article class="card">
  <h3>Homepage scan</h3>
  <p>18 checks passed, 2 warnings, 0 failures.</p>
  <p>✓ Passing sample</p>
</article>

const resultCard = card()
const passingStatus = css({ color: 'positive' })
const infoStatus = css({ color: 'info' })
const warningStatus = css({ color: 'warning' })
const criticalStatus = css({ color: 'critical' })

Preview

State examples

Usage guidance

• Announce active work with text, not with motion alone.
• Keep loading indicators inside the region they describe so users can tell what is pending.
• If the layout is already known, skeletons can reduce surprise while content arrives.

Copyable examples

<div role="status" aria-label="Loading sample results"></div>
<p>Preparing sample scan results</p>

const busySpinner = spinner()
const loadingSkeleton = skeleton()

Preview

State examples

Usage guidance

• Reach for container, stack and grid before hand-written layout CSS; shared patterns reuse the same atomic classes, so new pages add almost no bytes.
• Gaps take spacing tokens (1–12), and the default is spacing 4 (16px), so layouts stay on the 4px rhythm.
• Use columns for a fixed count and minChildWidth (a CSS length) when items should wrap on their own. Both keep every track inside a 320px viewport.

Copyable examples

<main class="container">
  <section class="stack">
    <h2>Scan results</h2>
    <ul class="grid">…</ul>
  </section>
</main>

import { container, stack, grid } from '../styled-system/patterns/index.mjs'

const page = container()                          // 1080px, token padding
const section = stack({ gap: '6' })               // column, 24px gap
const results = grid({ minChildWidth: '240px' })  // wraps, never overflows
const stats = grid({ columns: { base: 2, md: 4 } })