Error panels
Explain recoverable problems with a visible next action.
Live preview
Unable to load the preview
Sample connection problem. Nothing was sent to a server.
HTML
<section class="xsh-error-panel" aria-labelledby="xsh-error-title">
<div aria-hidden="true">!</div>
<h3 id="xsh-error-title">Unable to load the preview</h3>
<p>Sample connection problem. Nothing was sent to a server.</p>
<button class="xsh-button xsh-button--secondary" data-xsh-toast="info" data-xsh-message="Preview retry is a UI-only example.">Retry preview</button>
</section>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-error-panel | Used by the example markup and component styles or behavior. |
xsh-button | Used by the example markup and component styles or behavior. |
Accessibility & keyboard
Retry button activates with Enter and Space and gives local feedback.
Implementation note. Connect the retry action to the actual operation and report its result.
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.