Feedback

Alert

A static alert banner with icon support, available in default and destructive variants.

Installation

bash

npx polyui add alert

Basic

基础

新消息！

12 条未读消息，点击查看。

Sara 回复了您上传的图片。

12 条未读消息，点击查看。

新消息！

正在创建您的账户

填写您的信息以开始使用。

tsx

import { getDocsDict, t } from "@/lib/docs-i18n"
import { Alert, AlertTitle, AlertDescription } from "@polyui/react/alert"
import { Button } from "@polyui/react/button"
import { CircleAlertIcon, ArrowRightIcon } from "lucide-react"
export function AlertBasic({ lang = "zh" }: { lang?: Lang }) {
  const dict = getDocsDict(lang)
  return (
    <div className="flex flex-col gap-3 w-full max-w-lg">
      <p className="text-xs font-mono text-muted-foreground uppercase tracking-widest mb-2">
        {t(dict, "demos.alerts.sectionBasic")}
      </p>

      {/* --- 变体1: 基础 --- */}
      <Alert>
        <CircleAlertIcon />
        <AlertTitle>{t(dict, "demos.alerts.newMessage")}</AlertTitle>
      </Alert>

      {/* --- 变体2: 带描述 --- */}
      <Alert>
        <CircleAlertIcon />
        <AlertTitle>{t(dict, "demos.alerts.newMessage")}</AlertTitle>
        <AlertDescription>{t(dict, "demos.alerts.unreadMessages")}</AlertDescription>
      </Alert>

      {/* --- 变体3: 带 Avatar 和描述 --- */}
      <Alert className="flex items-center justify-between">
        <div className="flex size-8 shrink-0 items-center justify-center rounded-sm bg-muted text-sm font-medium text-muted-foreground">
          {t(dict, "demos.alerts.avatarHr")}
        </div>
        <div className="flex-1 flex-col justify-center gap-1 px-3">
          <AlertTitle className="flex-1">{t(dict, "demos.alerts.saraReplied")}</AlertTitle>
          <AlertDescription>{t(dict, "demos.alerts.unreadMessages")}</AlertDescription>
        </div>
        <CircleAlertIcon className="shrink-0" />
      </Alert>

      {/* --- 变体13: 带操作按钮 --- */}
      <Alert className="flex items-center justify-between [&>svg]:translate-y-0">
        <CircleAlertIcon />
        <AlertTitle className="flex-1">{t(dict, "demos.alerts.newMessage")}</AlertTitle>
        <Button variant="outline" className="h-7 cursor-pointer rounded-md px-2">
          {t(dict, "demos.alerts.btnOpen")}
        </Button>
      </Alert>

      {/* --- 变体4: 蓝色 sky — 带链接按钮 --- */}
      <Alert className="flex items-center justify-between border-sky-600/30 bg-sky-600/5 text-sky-600 dark:border-sky-400/35 dark:bg-sky-400/5 dark:text-sky-400 [&>svg]:translate-y-0">
        <CircleAlertIcon />
        <AlertTitle className="flex-1">{t(dict, "demos.alerts.newMessage")}</AlertTitle>
        <Button
          variant="outline"
          className="h-7 cursor-pointer rounded-md border-sky-600/40 px-2 text-sky-600! hover:bg-sky-600/10 dark:border-sky-400/45 dark:text-sky-400! dark:hover:bg-sky-400/10"
        >
          {t(dict, "demos.alerts.btnLink")}
          <ArrowRightIcon />
        </Button>
      </Alert>

      {/* --- 变体16: 无图标 --- */}
      <Alert>
        <AlertTitle>{t(dict, "demos.alerts.newMessage")}</AlertTitle>
      </Alert>

      {/* --- 变体17: 带描述（创建账户） --- */}
      <Alert>
        <CircleAlertIcon />
        <AlertTitle>{t(dict, "demos.alerts.creatingAccount")}</AlertTitle>
        <AlertDescription>{t(dict, "demos.alerts.fillDetails")}</AlertDescription>
      </Alert>
    </div>
  )
}

Outline Colored

Alert ships with two variants: default for informational messages and destructive for errors.

描边彩色

验证您的邮箱以激活账户

我们已向您的收件箱发送了确认链接，请查收邮件以完成注册。

账户创建成功

一切就绪！您现在可以登录并开始探索您的仪表盘。

您的密码强度不足

建议混合使用大写字母、数字和符号以提高安全性。

出错了！

无法处理您的付款。

tsx

import { getDocsDict, t } from "@/lib/docs-i18n"
import { Alert, AlertTitle, AlertDescription } from "@polyui/react/alert"
import { CircleAlertIcon, TriangleAlertIcon, CheckCheckIcon } from "lucide-react"
export function AlertOutlineColored({ lang = "zh" }: { lang?: Lang }) {
  const dict = getDocsDict(lang)
  return (
    <div className="flex flex-col gap-3 w-full max-w-lg">
      <p className="text-xs font-mono text-muted-foreground uppercase tracking-widest mt-2 mb-2">
        {t(dict, "demos.alerts.sectionOutlineColored")}
      </p>

      {/* --- 变体18: 蓝色信息带描述 --- */}
      <Alert className="border-sky-600/30 bg-sky-600/5 text-sky-600 dark:border-sky-400/35 dark:bg-sky-400/5 dark:text-sky-400">
        <CircleAlertIcon />
        <AlertTitle>{t(dict, "demos.alerts.verifyEmail")}</AlertTitle>
        <AlertDescription className="text-sky-600/80 dark:text-sky-400/80">
          {t(dict, "demos.alerts.confirmationSent")}
        </AlertDescription>
      </Alert>

      {/* --- 变体19: 绿色成功带描述 --- */}
      <Alert className="border-green-600/30 bg-green-600/5 text-green-600 dark:border-green-400/35 dark:bg-green-400/5 dark:text-green-400">
        <CheckCheckIcon />
        <AlertTitle>{t(dict, "demos.alerts.accountCreated")}</AlertTitle>
        <AlertDescription className="text-green-600/80 dark:text-green-400/80">
          {t(dict, "demos.alerts.allSet")}
        </AlertDescription>
      </Alert>

      {/* --- 变体20: Amber 警告带描述 --- */}
      <Alert className="border-amber-600/30 bg-amber-600/5 text-amber-600 dark:border-amber-400/35 dark:bg-amber-400/5 dark:text-amber-400">
        <CircleAlertIcon />
        <AlertTitle>{t(dict, "demos.alerts.passwordWeak")}</AlertTitle>
        <AlertDescription className="text-amber-600/80 dark:text-amber-400/80">
          {t(dict, "demos.alerts.passwordTip")}
        </AlertDescription>
      </Alert>

      {/* --- 变体14: Destructive 变体 --- */}
      <Alert variant="destructive">
        <TriangleAlertIcon />
        <AlertTitle>{t(dict, "demos.alerts.somethingWrong")}</AlertTitle>
      </Alert>

      {/* --- 变体15: Destructive 带边框 --- */}
      <Alert variant="destructive" className="border-destructive/50">
        <TriangleAlertIcon />
        <AlertTitle>{t(dict, "demos.alerts.paymentFailed")}</AlertTitle>
      </Alert>
    </div>
  )
}

Soft

柔和

文件应为 PDF、DOCX、JPG 或 PNG。

如果文件类型不在此列表中，我们将无法获取您的文件。

仅允许特定文件类型

您可以上传最大 20MB 的 PDF、DOCX、JPG 或 PNG 文件。

文件上传成功

您的文档已保存，现在可以在文件中查看。

此文件可能过大

上传大文件可能需要更长时间或失败，建议先进行压缩。

上传失败

出了点问题，请重试或使用其他文件格式。

tsx

import { getDocsDict, t } from "@/lib/docs-i18n"
import { Alert, AlertTitle, AlertDescription } from "@polyui/react/alert"
import { CircleAlertIcon, TriangleAlertIcon, CheckCheckIcon } from "lucide-react"
export function AlertSoft({ lang = "zh" }: { lang?: Lang }) {
  const dict = getDocsDict(lang)
  return (
    <div className="flex flex-col gap-3 w-full max-w-lg">
      <p className="text-xs font-mono text-muted-foreground uppercase tracking-widest mt-2 mb-2">
        {t(dict, "demos.alerts.sectionSoft")}
      </p>

      {/* --- 变体21: Soft primary --- */}
      <Alert className="bg-primary/10 border-none">
        <CircleAlertIcon />
        <AlertTitle>{t(dict, "demos.alerts.fileTypeTitle")}</AlertTitle>
        <AlertDescription>{t(dict, "demos.alerts.fileTypeDesc")}</AlertDescription>
      </Alert>

      {/* --- 变体22: Soft 蓝色信息 --- */}
      <Alert className="border-none bg-sky-600/10 text-sky-600 dark:bg-sky-400/10 dark:text-sky-400">
        <CircleAlertIcon />
        <AlertTitle>{t(dict, "demos.alerts.fileTypesAllowed")}</AlertTitle>
        <AlertDescription className="text-sky-600/80 dark:text-sky-400/80">
          {t(dict, "demos.alerts.fileTypesDesc")}
        </AlertDescription>
      </Alert>

      {/* --- 变体23: Soft 绿色成功 --- */}
      <Alert className="border-none bg-green-600/10 text-green-600 dark:bg-green-400/10 dark:text-green-400">
        <CheckCheckIcon />
        <AlertTitle>{t(dict, "demos.alerts.fileUploaded")}</AlertTitle>
        <AlertDescription className="text-green-600/80 dark:text-green-400/80">
          {t(dict, "demos.alerts.fileUploadedDesc")}
        </AlertDescription>
      </Alert>

      {/* --- 变体24: Soft Amber 警告 --- */}
      <Alert className="border-none bg-amber-600/10 text-amber-600 dark:bg-amber-400/10 dark:text-amber-400">
        <CircleAlertIcon />
        <AlertTitle>{t(dict, "demos.alerts.fileTooLarge")}</AlertTitle>
        <AlertDescription className="text-amber-600/80 dark:text-amber-400/80">
          {t(dict, "demos.alerts.fileTooLargeDesc")}
        </AlertDescription>
      </Alert>

      {/* --- 变体25: Soft 危险 --- */}
      <Alert className="bg-destructive/10 text-destructive border-none">
        <TriangleAlertIcon />
        <AlertTitle>{t(dict, "demos.alerts.uploadFailed")}</AlertTitle>
        <AlertDescription className="text-destructive/80">{t(dict, "demos.alerts.uploadFailedDesc")}</AlertDescription>
      </Alert>
    </div>
  )
}

Solid

实心

正在编辑您的个人资料

点击"更新"之前，更改不会被保存。

个人资料已更新

您的更改已成功保存。

部分信息缺失

完善您的个人资料以获得最佳体验。

您的个人资料已公开

任何人都可以查看您的基本信息。

无法保存更改

请重试或刷新页面。

tsx

import { getDocsDict, t } from "@/lib/docs-i18n"
import { Alert, AlertTitle, AlertDescription } from "@polyui/react/alert"
import { CircleAlertIcon, TriangleAlertIcon, CheckCheckIcon } from "lucide-react"
export function AlertSolid({ lang = "zh" }: { lang?: Lang }) {
  const dict = getDocsDict(lang)
  return (
    <div className="flex flex-col gap-3 w-full max-w-lg">
      <p className="text-xs font-mono text-muted-foreground uppercase tracking-widest mt-2 mb-2">
        {t(dict, "demos.alerts.sectionSolid")}
      </p>

      {/* --- 变体26: Solid primary --- */}
      <Alert className="bg-primary text-primary-foreground border-none">
        <CircleAlertIcon />
        <AlertTitle>{t(dict, "demos.alerts.editingProfile")}</AlertTitle>
        <AlertDescription className="text-primary-foreground/80">
          {t(dict, "demos.alerts.editingProfileDesc")}
        </AlertDescription>
      </Alert>

      {/* --- 变体27: Solid 绿色成功 --- */}
      <Alert className="border-none bg-green-600 text-white dark:bg-green-400">
        <CheckCheckIcon />
        <AlertTitle>{t(dict, "demos.alerts.profileUpdated")}</AlertTitle>
        <AlertDescription className="text-white/80">{t(dict, "demos.alerts.profileUpdatedDesc")}</AlertDescription>
      </Alert>

      {/* --- 变体28: Solid Amber 警告 --- */}
      <Alert className="border-none bg-amber-600 text-white dark:bg-amber-400">
        <CircleAlertIcon />
        <AlertTitle>{t(dict, "demos.alerts.detailsMissing")}</AlertTitle>
        <AlertDescription className="text-white/80">{t(dict, "demos.alerts.detailsMissingDesc")}</AlertDescription>
      </Alert>

      {/* --- 变体29: Solid 蓝色信息 --- */}
      <Alert className="border-none bg-sky-600 text-white dark:bg-sky-400">
        <CircleAlertIcon />
        <AlertTitle>{t(dict, "demos.alerts.profileVisible")}</AlertTitle>
        <AlertDescription className="text-white/80">{t(dict, "demos.alerts.profileVisibleDesc")}</AlertDescription>
      </Alert>

      {/* --- 变体30: Solid 危险 --- */}
      <Alert className="bg-destructive dark:bg-destructive/60 border-none text-white">
        <TriangleAlertIcon />
        <AlertTitle>{t(dict, "demos.alerts.couldntSave")}</AlertTitle>
        <AlertDescription className="text-white/80">{t(dict, "demos.alerts.couldntSaveDesc")}</AlertDescription>
      </Alert>
    </div>
  )
}

Special

特殊

此文件包含病毒！

有新版本可用

包含新的仪表盘视图，页面和导出现在加载更快。

正在上传 'Img-234.png'

请稍候，我们正在上传您的图片。

验证您的邮箱以激活账户

我们已向您的收件箱发送了确认链接，请查收邮件以完成注册。

您加入团队的申请已通过。

您加入团队的申请被拒绝。

系统通知

您有 3 条未读消息，点击查看详情。

tsx

import { getDocsDict, t } from "@/lib/docs-i18n"
import { Alert, AlertTitle, AlertDescription } from "@polyui/react/alert"
import { Button } from "@polyui/react/button"
import { CircleAlertIcon, FileWarningIcon, UserCheckIcon, UserRoundXIcon, BellIcon, UploadIcon } from "lucide-react"
export function AlertSpecial({ lang = "zh" }: { lang?: Lang }) {
  const dict = getDocsDict(lang)
  return (
    <div className="flex flex-col gap-3 w-full max-w-lg">
      <p className="text-xs font-mono text-muted-foreground uppercase tracking-widest mt-2 mb-2">
        {t(dict, "demos.alerts.sectionSpecial")}
      </p>

      {/* --- 变体5: 附加图标栏 (attached icon) --- */}
      <Alert className="flex items-stretch p-0">
        <div className="bg-destructive/10 text-destructive flex items-center rounded-l-lg border-r p-2">
          <FileWarningIcon className="size-4" />
        </div>
        <AlertTitle className="p-3">{t(dict, "demos.alerts.fileVirus")}</AlertTitle>
      </Alert>

      {/* --- 变体6: 图标 Avatar 聚焦样式 --- */}
      <Alert className="flex items-center gap-3">
        <div className="flex size-8 shrink-0 items-center justify-center rounded-md bg-destructive/10 text-destructive dark:bg-destructive/20">
          <FileWarningIcon className="size-4" />
        </div>
        <AlertTitle>{t(dict, "demos.alerts.fileVirus")}</AlertTitle>
      </Alert>

      {/* --- 变体7: 实心 primary — 多操作 --- */}
      <Alert className="bg-primary text-primary-foreground flex justify-between border-none">
        <CircleAlertIcon />
        <div className="flex flex-1 flex-col gap-4">
          <div className="flex-1 flex-col justify-center gap-1">
            <AlertTitle>{t(dict, "demos.alerts.newUpdate")}</AlertTitle>
            <AlertDescription className="text-primary-foreground/80">
              {t(dict, "demos.alerts.newUpdateDesc")}
            </AlertDescription>
          </div>
          <div className="flex items-center gap-4">
            <Button className="bg-secondary/10 hover:bg-secondary/20 h-7 cursor-pointer rounded-md px-2">
              {t(dict, "demos.alerts.btnSkipUpdate")}
            </Button>
            <Button variant="secondary" className="h-7 cursor-pointer rounded-md px-2">
              {t(dict, "demos.alerts.btnInstallNow")}
            </Button>
          </div>
        </div>
      </Alert>

      {/* --- 变体8: 上传进度 --- */}
      <Alert className="flex justify-between">
        <UploadIcon />
        <div className="flex flex-1 flex-col gap-4">
          <div className="flex-1 flex-col justify-center gap-1">
            <AlertTitle>{t(dict, "demos.alerts.uploadingFile")}</AlertTitle>
            <AlertDescription>{t(dict, "demos.alerts.uploadingFileDesc")}</AlertDescription>
          </div>
          <div className="h-1.5 w-full overflow-hidden rounded-full bg-sky-600/20">
            <div className="h-full w-1/2 rounded-full bg-sky-600 dark:bg-sky-400" />
          </div>
        </div>
      </Alert>

      {/* --- 变体9: 渐变背景 --- */}
      <Alert className="border-accent-foreground/20 bg-accent text-accent-foreground flex justify-between">
        <CircleAlertIcon />
        <div className="flex flex-1 flex-col gap-1">
          <AlertTitle>{t(dict, "demos.alerts.verifyEmail")}</AlertTitle>
          <AlertDescription className="text-accent-foreground/60">
            {t(dict, "demos.alerts.confirmationSent")}
          </AlertDescription>
        </div>
      </Alert>

      {/* --- 变体10: 左侧指示条 — 成功绿色 --- */}
      <Alert className="rounded-md border-l-4 border-green-600 bg-green-600/10 text-green-600 dark:border-green-400 dark:bg-green-400/10 dark:text-green-400">
        <UserCheckIcon />
        <AlertTitle>{t(dict, "demos.alerts.requestApproved")}</AlertTitle>
      </Alert>

      {/* --- 变体11: 左侧指示条 — 危险红色 --- */}
      <Alert className="border-destructive bg-destructive/10 text-destructive rounded-none border-0 border-l-4">
        <UserRoundXIcon />
        <AlertTitle>{t(dict, "demos.alerts.requestDenied")}</AlertTitle>
      </Alert>

      {/* --- 变体12: 铃铛通知 — 带描述 --- */}
      <Alert>
        <BellIcon />
        <AlertTitle>{t(dict, "demos.alerts.systemNotification")}</AlertTitle>
        <AlertDescription>{t(dict, "demos.alerts.systemNotificationDesc")}</AlertDescription>
      </Alert>
    </div>
  )
}

Props

Alert

属性	类型	默认值	说明
`variant`	`"default" \| "destructive"`	`"default"`	Visual variant of the alert

AlertTitle

属性	类型	默认值	说明
`className`	`string`	`—`	Additional CSS class names

AlertDescription

属性	类型	默认值	说明
`className`	`string`	`—`	Additional CSS class names