Alerts
Surface contextual information with distinct semantic tones and readable text.
Live preview
Information
Your dashboard data refreshes every five minutes.
Deployment successful
All changes are live in production.
Action required
Review billing details before your renewal.
Unable to connect
Check your network and try again.
<div class="xsh-stack">
<div class="xsh-alert">
<span class="xsh-alert__icon" aria-hidden="true">ⓘ</span>
<div>
<p class="xsh-alert__title">Information</p>
<p class="xsh-alert__body">Your dashboard data refreshes every five minutes.</p>
</div>
<button class="xsh-alert__close" aria-label="Dismiss information" data-xsh-dismiss>×</button>
</div>
<div class="xsh-alert xsh-alert--success">
<span class="xsh-alert__icon" aria-hidden="true">✓</span>
<div>
<p class="xsh-alert__title">Deployment successful</p>
<p class="xsh-alert__body">All changes are live in production.</p>
</div>
</div>
<div class="xsh-alert xsh-alert--warning">
<span class="xsh-alert__icon" aria-hidden="true">!</span>
<div>
<p class="xsh-alert__title">Action required</p>
<p class="xsh-alert__body">Review billing details before your renewal.</p>
</div>
</div>
<div class="xsh-alert xsh-alert--danger">
<span class="xsh-alert__icon" aria-hidden="true">×</span>
<div>
<p class="xsh-alert__title">Unable to connect</p>
<p class="xsh-alert__body">Check your network and try again.</p>
</div>
</div>
</div>Installation & markup
Include the local stylesheet and script once on the page, then place the component inside a data-xsh-ui root. The example above works without a build system.
<link rel="stylesheet" href="/dist/xshna-ui.css">
<div data-xsh-ui>
<!-- Add the HTML example above -->
</div>
<script defer src="/dist/xshna-ui.js"></script>Component API
Public classes, attributes and hooks used by this example. Keep the xsh- prefix intact.
| Identifier | Contract |
|---|---|
xsh-alert | Used by the example markup and component styles or behavior. |
xsh-alert--success | Used by the example markup and component styles or behavior. |
xsh-alert--warning | Used by the example markup and component styles or behavior. |
xsh-alert--danger | Used by the example markup and component styles or behavior. |
xsh-alert--neutral | Used by the example markup and component styles or behavior. |
data-xsh-dismiss | Used by the example markup and component styles or behavior. |
Accessibility & keyboard
Static alerts remain in document reading order. For dynamically inserted urgent messages use role=alert; avoid treating every informational message as an interruption.
Interaction contract
Behavioral components use the shared delegated runtime; visual-only primitives rely on semantic HTML and CSS. Runtime controls emit bubbling xsh:* CustomEvents; bind application handlers to those events when server persistence, API data or navigation is required.