Concorde UI component — Alert. Alerts surface important feedback inline—errors, confirmations, or contextual help. Use label / text for simple copy, or the default slot for rich content (links, buttons). Set announce when the messa Doc ID: core/components/ui/alert/alert. Keywords: Concorde, supersoniks, core/components/ui/alert/alert, alert, Alert, UI component, sonic-alert, web component, label, text, announce, status, default, role, aria-live. URL: https://concorde.supersoniks.org/core/components/ui/alert.

Alert

Alerts surface important feedback inline—errors, confirmations, or contextual help. Use label / text for simple copy, or the default slot for rich content (links, buttons). Set announce when the message appears after an action so screen readers pick it up.

Basic example

<sonic-alert status="error" label="Gate change" text="CN 001 now departs from gate B12" background></sonic-alert>

Status

Color and icon follow status. With no status, behavior is default.

<div class="grid gap-4">
      <sonic-alert label="Default">CN 001 · CDG → JFK.</sonic-alert>
      <sonic-alert status="success" label="Success">CN 001 has landed at JFK.</sonic-alert>
      <sonic-alert status="error" label="Error">CN 001 is cancelled.</sonic-alert>
      <sonic-alert status="warning" label="Warning">Turbulence expected over the Atlantic.</sonic-alert>
      <sonic-alert status="info" label="Info">Boarding starts in 20 minutes.</sonic-alert>
    </div>

Accessibility (announce)

By default, an alert already in the DOM is not announced (no role / aria-live). Set announce when the message appears after user action (API response, validation, etc.): screen readers get role="alert" for error, otherwise role="status" and aria-live="polite".

sonic-alert-messages sets announce on every rendered alert.

<sonic-alert announce status="success" label="Checked in" text="Your boarding pass is ready."></sonic-alert>

Content and icon

label and text accept plain text only. The default slot is rendered after text. Use the icon slot to replace the default sonic-icon. noIcon hides the icon.

<sonic-alert status="info" noIcon label="No icon" text="Cruising altitude reached."></sonic-alert>

Custom icon slot

Project any markup into slot="icon" (icon, image, custom component). Keep it decorative with aria-hidden="true" when the message text already conveys meaning.

<sonic-alert status="success" label="Upgrade confirmed" background>
      <sonic-icon slot="icon" library="iconoir" name="trophy" aria-hidden="true"></sonic-icon>
      You are now seated in first class.
    </sonic-alert>

Size

Default size is md (omit the size attribute). inherit follows the parent font size.

<div class="grid gap-4">
      <sonic-alert status="error" label="Delayed" size="2xs">
        CN 001 departure moved to 18:40.
      </sonic-alert>
      <sonic-alert status="error" label="Delayed" size="xs">
        CN 001 departure moved to 18:40.
      </sonic-alert>
      <sonic-alert status="error" label="Delayed" size="sm">
        CN 001 departure moved to 18:40.
      </sonic-alert>
      <sonic-alert status="error" label="Delayed">
        CN 001 departure moved to 18:40.
      </sonic-alert>
      <sonic-alert status="error" label="Delayed" size="lg">
        CN 001 departure moved to 18:40.
      </sonic-alert>
      <sonic-alert status="error" label="Delayed" size="xl">
        CN 001 departure moved to 18:40.
      </sonic-alert>
      <sonic-alert status="error" label="Delayed" size="2xl">
        CN 001 departure moved to 18:40.
      </sonic-alert>
    </div>

Alert with link

Rich content in the slot (buttons, links).

<sonic-alert status="info" label="Gate change">
      CN 001 now departs from gate B12<br />
      <div class="flex gap-2 mt-1">
        <sonic-button variant="outline" type="info" size="xs">View flight</sonic-button>
        <sonic-button variant="ghost" type="info" size="xs">Dismiss</sonic-button>
      </div>
    </sonic-alert>

Background

Tinted background from the status color (color-mix on currentColor).

<div class="grid gap-4">
      <sonic-alert background label="Flight update">Boarding is now open at gate B12.</sonic-alert>
      <sonic-alert status="success" background label="Flight update">
        Boarding is now open at gate B12.
      </sonic-alert>
      <sonic-alert status="error" background label="Flight update">
        Boarding is now open at gate B12.
      </sonic-alert>
      <sonic-alert status="warning" background label="Flight update">
        Boarding is now open at gate B12.
      </sonic-alert>
      <sonic-alert status="info" background label="Flight update">
        Boarding is now open at gate B12.
      </sonic-alert>
    </div>

Dismissible

dismissible removes the alert from the DOM when the close control is clicked (i18n aria label). dismissible and background are independent: without background, close sits at the end of the row; with background, top-right.

<sonic-alert status="info" class="mb-3" dismissible label="Baggage claim moved to belt 4.">
    </sonic-alert>
    <sonic-alert class="mb-3" dismissible background label="Flight update">
      Boarding is now open at gate B12.
    </sonic-alert>

Dismiss forever

With dismissForever, dismissal is stored in localStorage (key sonic-alert-dismissed). A stable id on the element is required; without id, a warning is logged and nothing is persisted.

<sonic-alert
      class="mb-3"
      dismissible
      background
      dismissForever
      label="Flight update"
      id="addressUniqueId"
    >
      Boarding is now open at gate B12.
    </sonic-alert>

API reference