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://rocket.libretto.ch/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>

<!-- Or skip the autoloader and load just this component: -->
<!-- <script type="module" src="https://rocket.libretto.ch/c/alert/alert.js"></script> -->

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.

Slots

Name	Description
`default`	The message.

Events

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