Skip to content

Alert

Stable Available in release assets

Present persistent, in-flow feedback that remains visible without JavaScript and does not steal focus from the current task.

Alert primary example

Show code
<div class="thin-alert" data-tone="warning">
  <span aria-hidden="true">!</span>
  <div class="thin-stack" data-space="xs">
    <strong>Shipping delay</strong>
    <p>Your order may arrive one day later due to extended customs checks.</p>
  </div>
</div>

Each authored example uses the production assets and includes copyable markup.

Warning alert

Persistent page-level feedback with a leading marker and meaningful heading.

Show code
<div class="thin-alert" data-tone="warning">
  <span aria-hidden="true">!</span>
  <div class="thin-stack" data-space="xs">
    <strong>Shipping delay</strong>
    <p>Your order may arrive one day later due to extended customs checks.</p>
  </div>
</div>

Success and danger tones

Tone variants reassign the alert accent without removing authored text.

Show code
<div class="thin-stack">
  <div class="thin-alert" data-tone="success">
    <span aria-hidden="true">✓</span>
    <div>
      <strong>Payment received</strong>
      <p>Your receipt is available in order history.</p>
    </div>
  </div>
  <div class="thin-alert" data-tone="danger">
    <span aria-hidden="true">!</span>
    <div>
      <strong>Payment failed</strong>
      <p>Update billing details before renewal.</p>
    </div>
  </div>
</div>

Alert with recovery action

Recovery links and buttons remain native controls outside the alert skin.

Show code
<div class="thin-alert" data-tone="danger">
  <span aria-hidden="true">!</span>
  <div>
    <strong>Products could not be refreshed.</strong>
    <p>Your current filters remain selected. <a href="?retry">Try again</a>
  </p>
</div>
</div>

Anatomy

  • Native .thin-alert host
  • Decorative leading marker
  • Strong heading or label
  • Supporting explanation
  • Optional native link or button

Variants and sizes

  • Success — shown above
  • Warning — shown above
  • Danger — shown above
  • With recovery action — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Default
  • Long localized copy
  • With inline link
  • Narrow container
  • 200% and 400% zoom
  • Forced colors
  • High-contrast theme

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Alerts are static content. Links and buttons inside an alert use native navigation and activation.

Accessibility

Use a meaningful heading or strong element, keep decorative markers aria-hidden, and never identify urgency by color alone. Do not use alerts for transient toast-style feedback that should live in a live region.

Contract
LIVE
Basis
Native in-flow message; use the APG Alert contract only when an immediately relevant message is dynamically inserted
Evidence
  • tests/unit/library/overlays-feedback-stable.test.ts

API

Wrap authored content in unregistered thin-alert. Set data-tone="success|warning|danger" for semantic tone; data-variant accepts success, warning, and danger as an alias. Add role="alert" only when the message is dynamically inserted and immediately relevant.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Without Thin-Sky CSS, the alert text and any links or buttons remain fully readable and operable in document order.

Assets and dependencies

  • /components.css

Dependencies: None

Source: packages/ui/src/items/alert/style.ts

Stability evidence

  • Persistent in-flow alert with tone variants and meaningful text: test:tests/unit/library/overlays-feedback-stable.test.ts
  • Complete item-specific API, fallback, and difficult-state documentation: test:tests/unit/library/overlays-feedback-stable.test.ts
  • Cross-theme, density, localized, narrow-container, zoom, and forced-colors fixture: review:site/src/pages/quality/index.astro#quality-review

Composition

Derived from the examples and style specs, not authored.

Composes