basecoat/docs/src/components/alert.md

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Alert	Displays a callout for user attention.	label id Usage usage label id children Examples examples label id Destructive example-destructive label id No description example-no-description label id No icon example-no-icon label id Action example-action label id Custom Colors example-custom-colors label id RTL example-rtl

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

{% set code %}

{% lucide "circle-check" %}

Success! Your changes have been saved

This is an alert with icon, title and description.

{% lucide "popcorn" %}

This Alert has a title and an icon. No description.

This is an alert with icon, title and description.

{% lucide "circle-check" %}

Unable to process your payment.

Please verify your billing information and try again.

• Check your card details
• Ensure sufficient funds
• Verify billing address

{% endset %} {{ code_preview("alert", code | prettyHtml) }}

Usage

Use the alert or alert-destructive.

{% set code_simple %}

{% lucide "circle-check" %}

Success! Your changes have been saved

This is an alert with icon, title and description.

{% endset %} {{ code_block(code_simple | prettyHtml) }}

The component has the following HTML structure:

<div class="alert">

Main container. Use alert for default styling or alert-destructive for error states.

<svg> Optional

The icon.

<h2>

The title.

<section> Optional

The description.

<div data-action> Optional

An action aligned to the inline end of the alert.

Examples

Destructive

{% set code %}

{% lucide "circle-alert" %}

Something went wrong!

Your session has expired. Please log in again.

{% endset %} {{ code_preview("alert-destructive", code) }}

No description

{% set code %}

{% lucide "shield-alert" %}

This is a very long alert title that demonstrates how the component handles extended text content and potentially wraps across multiple lines

{% endset %} {{ code_preview("alert-no-description", code) }}

No icon

{% set code %}

Success! Your changes have been saved

This is an alert with icon, title and description.

{% endset %} {{ code_preview("alert-no-icon", code) }}

Action

{% set code %}

{% lucide "info" %}

Enable notifications

Receive updates when there is activity in your workspace.

Enable

{% endset %} {{ code_preview("alert-action", code) }}

Custom Colors

{% set code %}

{% lucide "triangle-alert" %}

Storage almost full

Upgrade your plan or delete unused files.

{% endset %} {{ code_preview("alert-custom-colors", code) }}

RTL

Alerts support right-to-left layouts through logical spacing and native text flow. Add dir="rtl" to the alert or an ancestor.

{% set code %}

{% lucide "info" %}

تم حفظ التغييرات

تم تحديث إعداداتك بنجاح.

عرض

{% endset %} {{ code_preview("alert-rtl", code) }}