# Alert

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

## Status

<sonic-code>
  <template>
  <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>
  </template>
</sonic-code>

## Sizes

<sonic-code>
  <template>
  <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>
  </template>
</sonic-code>

## Alert with link

<sonic-code>
  <template>
  <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>
  </template>
</sonic-code>

## Background

<sonic-code>
  <template>
  <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>
  </template>
</sonic-code>

## Dismissible

<sonic-code>
  <template>
  <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>
  </template>
</sonic-code>

## Dismiss forever

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