---
layout: layouts/component.njk
title: Alert
description: Displays a callout for user attention.
toc:
  - label: Usage
    id: usage
  - label: Examples
    id: examples
    children:
      - label: Destructive
        id: example-destructive
      - label: No description
        id: example-no-description
      - label: No icon
        id: example-no-icon
---

{% from "macros/code_preview.njk" import code_preview %}
{% from "macros/code_block.njk" import code_block %}

{% set code %}<div class="alert">
  {% lucide "circle-check" %}
  <h2>Success! Your changes have been saved</h2>
  <section>This is an alert with icon, title and description.</section>
</div>{% endset %}
{{ code_preview("alert", code) }}

<h2 id="usage">Usage</h2>

<section class="prose my-6">
  <p>You can use one of the two classes: <code>alert</code> or <code>alert-dialog</code> with any of the following children:</p>
  <ul>
    <li>A SVG icon,</li>
    <li>A <code>&lt;h2&gt;</code> for the title.</li>
    <li>A <code>&lt;section&gt;</code> for the description.</li>
  </ul>
  <p><a href="/kitchen-sink#alert">See the kitchen sink for more examples.</a></p>
</section>

{{ code_block(code) }}

<h2 id="examples"><a href="#examples">Examples</a></h2>

<h3 id="example-destructive"><a href="#example-destructive">Destructive</a></h3>

{% set code %}<div class="alert-destructive">
  {% lucide "circle-alert" %}
  <h2>Something went wrong!</h2>
  <section>Your session has expired. Please log in again.</section>
</div>{% endset %}
{{ code_preview("alert-destructive", code) }}

<h3 id="example-no-description"><a href="#example-no-description">No description</a></h3>

{% set code %}
<div class="alert">
  {% lucide "shield-alert" %}
  <h2>This is a very long alert title that demonstrates how the component handles extended text content and potentially wraps across multiple lines</h2>
</div>{% endset %}
{{ code_preview("alert-no-description", code) }}

<h3 id="example-no-icon"><a href="#example-no-icon">No icon</a></h3>

{% set code %}<div class="alert">
  <h2>Success! Your changes have been saved</h2>
  <section>This is an alert with icon, title and description.</section>
</div>{% endset %}
{{ code_preview("alert-no-icon", code) }}