Concorde UI component — Alert. This address is already in use. Lorem ipsum dolor sit amet. Doc ID: core/components/ui/alert/alert. Keywords: Concorde, supersoniks, core/components/ui/alert/alert, alert, Alert, UI component, sonic-alert, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/alert/alert.html.

Alert

<sonic-alert status="error" label="Email error" text="This address is already in use" background></sonic-alert>

Status

<div class="grid gap-4">
  <sonic-alert label="Default"> This address is already in use. </sonic-alert>
  <sonic-alert status="success" label="Success"> This address is already in use. </sonic-alert>
  <sonic-alert status="error" label="Error"> This address is already in use. </sonic-alert>
  <sonic-alert status="warning" label="Warning"> This address is already in use. </sonic-alert>
  <sonic-alert status="info" label="Info"> This address is already in use. </sonic-alert>
  </div>

Sizes

<div class="grid gap-4">
  <sonic-alert status="error" label="Email error" size="2xs">
    This address is already in use. Lorem ipsum dolor sit amet.
  </sonic-alert>
  <sonic-alert status="error" label="Email error" size="xs">
    This address is already in use. Lorem ipsum dolor sit amet.
  </sonic-alert>
  <sonic-alert status="error" label="Email error" size="sm">
    This address is already in use. Lorem ipsum dolor sit amet.
  </sonic-alert>
  <sonic-alert status="error" label="Email error">
    This address is already in use. Lorem ipsum dolor sit amet.
  </sonic-alert>
  <sonic-alert status="error" label="Email error" size="lg">
    This address is already in use. Lorem ipsum dolor sit amet.
  </sonic-alert>
  <sonic-alert status="error" label="Email error" size="xl">
    This address is already in use. Lorem ipsum dolor sit amet.
  </sonic-alert>
  <sonic-alert status="error" label="Email error" size="2xl">
    This address is already in use. Lorem ipsum dolor sit amet.
  </sonic-alert>
  </div>

Alert with link

<sonic-alert status="info" label="New messages !">
    You have 2 unread messages<br />
    <div class="flex gap-2 mt-1">
      <sonic-button variant="outline" type="info" size="xs">See messages</sonic-button>
      <sonic-button variant="ghost" type="info" size="xs">dismiss</sonic-button>
    </div>
  </sonic-alert>

Background

<div class="grid gap-4">
  <sonic-alert background label="Lorem ipsum dolor">
    This address is already in use.
  </sonic-alert>
  <sonic-alert status="success" background label="Lorem ipsum dolor">
    This address is already in use.
  </sonic-alert>
  <sonic-alert status="error" background label="Lorem ipsum dolor">
    This address is already in use.
  </sonic-alert>
  <sonic-alert status="warning" background label="Lorem ipsum dolor">
    This address is already in use.
  </sonic-alert>
  <sonic-alert status="info" background label="Lorem ipsum dolor">
    This address is already in use.
  </sonic-alert>
  </div>

Dismissible

<sonic-alert class="mb-3" dismissible label="Lorem ipsum dolor">
    This address is already in use.
  </sonic-alert>
  <sonic-alert status="success" class="mb-3" dismissible label="Lorem ipsum dolor">
    This address is already in use.
  </sonic-alert>
  <sonic-alert status="error" class="mb-3" dismissible label="Lorem ipsum dolor">
    This address is already in use.
  </sonic-alert>
  <sonic-alert status="warning" class="mb-3" dismissible label="Lorem ipsum dolor">
    This address is already in use.
  </sonic-alert>
  <sonic-alert status="info" class="mb-3" dismissible label="Lorem ipsum dolor">
    This address is already in use.
  </sonic-alert>

Dismiss forever

<sonic-alert class="mb-3" dismissible dismissForever label="Lorem ipsum dolor" id="addressUniqueId">
    This address is already in use.
  </sonic-alert>