Alert

import { CheckCircle2Icon, InfoIcon } from "lucide-react"

import {

インストール#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add alert
コピー

使用法#

コピーimport {
  Alert,
  AlertAction,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"

コピー<Alert>
  <InfoIcon />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
  <AlertAction>
    <Button variant="outline">Enable</Button>
  </AlertAction>
</Alert>

構成#

次の構成を使用して、Alert を構築します。

コピーAlert
├── Icon
├── AlertTitle
├── AlertDescription
└── AlertAction

基本#

アイコン、タイトル、説明を含む基本的なアラート。

import { CheckCircle2Icon } from "lucide-react"

import {

破壊的#

variant="destructive" を使用して、破壊的なアラートを作成します。

import { AlertCircleIcon } from "lucide-react"

import {

アクション#

AlertAction を使用して、ボタンまたはその他のアクション要素をアラートに追加します。

import {
  Alert,
  AlertAction,

カスタムカラー#

bg-amber-50 dark:bg-amber-950 などのカスタムクラスを Alert コンポーネントに追加することで、アラートの色をカスタマイズできます。

import { AlertTriangleIcon } from "lucide-react"

import {

RTL#

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイド を参照してください。

"use client"

import * as React from "react"

API リファレンス#

アラート#

Alert コンポーネントは、ユーザーの注意を促すコールアウトを表示します。

アラートタイトル#

AlertTitle コンポーネントは、アラートのタイトルを表示します。

アラートの説明#

AlertDescription コンポーネントは、アラートの説明または内容を表示します。

アラートアクション#

AlertAction コンポーネントは、アラートの右上隅に絶対配置されたアクション要素 (ボタンなど) を表示します。