反馈

提示

带图标的静态提示条，支持 default 和 destructive 两种变体。

安装

bash

npx polyui add alert

基础

新消息！

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>
  )
}

描边彩色

Alert 提供两种变体：default 用于信息提示，destructive 用于错误警告。

描边彩色

验证您的邮箱以激活账户

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

账户创建成功

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

您的密码强度不足

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

出错了！

无法处理您的付款。

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>
  )
}

柔和

文件应为 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>
  )
}

实色

实心

正在编辑您的个人资料

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

个人资料已更新

您的更改已成功保存。

部分信息缺失

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

您的个人资料已公开

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

无法保存更改

请重试或刷新页面。

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>
  )
}

特殊效果

特殊

此文件包含病毒！

有新版本可用

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

正在上传 '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>
  )
}

属性

Alert

属性	类型	默认值	说明
`variant`	`"default" \| "destructive"`	`"default"`	提示条的视觉变体

AlertTitle

属性	类型	默认值	说明
`className`	`string`	`—`	自定义样式类名

AlertDescription

属性	类型	默认值	说明
`className`	`string`	`—`	自定义样式类名