警报

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.

用途

Include CSS

导入 Tailwind 和一个完整的 A3S UI 样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

或者仅导入基本 CSS、警报组件 CSS 和一个样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/alert.css";
@import "@a3s-lab/ui/styles/a3s.css";

使用CDN或批量程序导入？请参见安装页。

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 结构

<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.

示例

基本

带有图标、标题和描述的基本警报。

Account updated successfully

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

破坏性

使用 data-variant="destructive" 创建破坏性警报。

Payment failed

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

动作

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.

自定义颜色

您可以通过向警报添加自定义类（例如 bg-amber-50 dark:bg-amber-950）来自定义警报颜色。

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

将 dir="rtl" 添加到警报或祖先。

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

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

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

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

#警报