Alert · Starbase

Playground

Your component is live.

variant

Alerts tell people what just happened. A pixel status light, a tinted surface and an optional dismiss button, in four tones.

Examples

Variants

Telemetry resumes in 30 seconds.

Your component is live.

Consider a gravity assist.

Seal deck 7 immediately.

<div style="display: grid; gap: 12px; inline-size: 100%">
  <sb-alert heading="Heads up">Telemetry resumes in 30 seconds.</sb-alert>
  <sb-alert variant="success" heading="Launch successful!">Your component is live.</sb-alert>
  <sb-alert variant="warning" heading="Low fuel">Consider a gravity assist.</sb-alert>
  <sb-alert variant="danger" heading="Hull breach">Seal deck 7 immediately.</sb-alert>
</div>

Dismissible

Check the gallery for fresh arrivals.

<sb-alert variant="info" closable heading="New components landed">Check the gallery for fresh arrivals.</sb-alert>

Server-driven

With Datastar the backend decides when to show an alert. Patch it into the page from an SSE response and the client needs no extra logic:

<div id="flash">
  <sb-alert variant="success" closable heading="Saved">Mission plan stored.</sb-alert>
</div>

Accessibility

Warning and danger alerts use role="alert" and are announced immediately. Info and success use the polite role="status".

Installation

Add Datastar with Rocket and the Starbase autoloader once per page, then use the tag. The autoloader imports each component the first time its tag appears, including tags added later by a Datastar morph.

<!-- Once per page: Datastar with Rocket, and the Starbase autoloader.
     It loads every <sb-…> component the first time its tag appears. -->
<script type="importmap">
  { "imports": { "datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar-rocket.js" } }
</script>
<script type="module" src="https://starbase.zweiundeins.gmbh/c/autoloader.js"></script>
<!-- Optional, no flash of undefined elements: class="sb-cloak" on <html>, and -->
<style>.sb-cloak :not(:defined) { visibility: hidden }</style>

<sb-alert variant="success" heading="Launch successful!" closable style="inline-size: 100%">Your component is live.</sb-alert>

<!-- In production, pin today's catalog instead of the latest: the browser then
     refuses any file that changed. Add "integrity" to the import map above: the
     hashes from https://starbase.zweiundeins.gmbh/c/@0a1ad1bf98a4/importmap.json and Datastar's, below. -->
<!--
<script type="importmap">
  { "imports": { "datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar-rocket.js" },
    "integrity": { "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar-rocket.js": "sha384-vUxZojLrF1Ar3de5h7VINqhJXBgjyZS4U49pHvGa87kum6j5Xn6JRziuARNw5ELG", "…": "…from importmap.json" } }
</script>
<script type="module" src="https://starbase.zweiundeins.gmbh/c/@0a1ad1bf98a4/autoloader.js" integrity="sha384-IvSCUjEWPS+wwXunU+48x96KmyWDx/Y4LeCwCL8cWFqJ/zHmTsTOsSMrzTOcpW3D"></script>
-->

<!-- Or load just this component, pinned to this version: -->
<!-- <script type="module" src="https://starbase.zweiundeins.gmbh/c/alert@aac18cd7f13f/alert.js" integrity="sha384-Bn8BCCHu45/ORuEawEKkUR+G4xpiyGPQ5/qV3RBM1cUSVIljPDy5dOlLB02XihED"></script> -->

Size

Each file compressed on its own, the way it is served (gzip -9, brotli -11). Datastar and Rocket are shared by every component and not counted.

File	Original	gzip	brotli
`alert.js`	3.7 kB	1.7 kB	1.4 kB

API reference

Props

Attribute	Type	Default	Description
`variant`	"info" \| "success" \| "warning" \| "danger"	`"info"`	Tone of the message.
`heading`	string	`""`	Bold first line.
`closable`	boolean	`false`	Show a dismiss button.
`open`	boolean	`true`	Shown. The server can hide or re-show it by changing the attribute (open="false").

Slots

Name	Description
`default`	The message.

Events

Name	Description
`sb-close`	After the alert was dismissed.