Alert

Accordion
Alert Dialog

Alert

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.

New feature available

We’ve added dark mode support. You can enable it in your account settings.

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

Or import only the base CSS, Alert component CSS, and one style pack.

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/alert.css";
@import "basecoat-css/styles/vega.css";

Using CDN or bundler imports? See the Installation page.

Add your alert HTML

Use alert for default styling. Add data-variant="destructive" for error states. Add a direct child <footer> for an inline-end action region.

<div class="alert"><svg class="lucide lucide-info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg>
  <h2>Heads up!</h2>
  <section>You can add components and dependencies to your app.</section>
  <footer>
    <button type="button" class="btn" data-variant="outline">Enable</button>
  </footer>
</div>

HTML structure

<div class=“alert”>

Main container. Use data-variant=“destructive” for error states.

<svg> Optional
The icon.
<h2>
The title.
<section> Optional
The description.
<footer> Optional
The action region, aligned to the inline end of the alert. Put the action element inside it, such as a button or link.

Examples

Basic

A basic alert with an icon, title and description.

Account updated successfully

Your profile information has been saved. Changes will be reflected immediately.

Destructive

Use data-variant="destructive" to create a destructive alert.

Payment failed

Your payment could not be processed. Please check your payment method and try again.

Action

Use <footer> to add a button or other action element to the alert.

Dark mode is now available

Enable it under your profile settings to get started.

Custom colors

You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the alert.

Your subscription will expire in 3 days.

Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.

RTL

Add dir="rtl" to the alert or an ancestor.

تم الدفع بنجاح

تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.

ميزة جديدة متاحة

لقد أضفنا دعم الوضع الداكن. يمكنك تفعيله في إعدادات حسابك.