Alert

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

import {

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/alert.json

사용법

import {
  Alert,
  AlertAction,
  AlertBadge,
  AlertDescription,
  AlertTitle,
} from "@/components/ui/alert"

AlertBadge 슬롯을 사용해 KRDS critical-badge(긴급/안전/안내) 영역을 명시적으로 표시하는 권장 패턴입니다.

<Alert variant="info">
  <AlertBadge>
    <InfoIcon />
    안내
  </AlertBadge>
  <AlertTitle>신청서 제출 전 입력한 정보를 다시 확인해 주세요.</AlertTitle>
  <AlertDescription>
    확인 후 제출 버튼을 누르면 처리 결과를 마이페이지에서 확인할 수 있습니다.
  </AlertDescription>
  <AlertAction>
    <Button variant="secondary">자세히 보기</Button>
  </AlertAction>
</Alert>

AlertBadge를 사용하지 않고 Alert의 첫 번째 자식 element만 두면 동일한 pill 스타일이 자동 적용되는 짧은 표기 패턴도 지원합니다. 두 패턴은 시각·접근성 측면에서 동일합니다.

<Alert variant="info">
  <span>
    <InfoIcon />
    안내
  </span>
  <AlertTitle>신청서 제출 전 입력한 정보를 다시 확인해 주세요.</AlertTitle>
</Alert>

KRDS 정렬

• 분류: KRDS 긴급 공지(Critical alerts) 가이드라인을 따르는 풀폭 배너 컴포넌트입니다. 본문 상단에 강조 노출하여 시급한 정보를 전달합니다.
• 구조: 첫 번째 자식 element가 자동으로 KRDS critical-badge pill 위치(col-start-1, row-span-2)에 배치되며 variant 색이 적용됩니다. 아이콘과 짧은 라벨(긴급/안전/안내 등)을 사용자가 직접 넣습니다.
• 상태: default / info / warning / destructive / success 5종은 각각 KRDS color-element-gray / information / warning / danger / success 토큰의 pill 배경으로 분기됩니다.
• 컨텐츠: AlertTitle은 KRDS critical-txt에 해당하는 본문(1–2줄)입니다. AlertDescription은 KRDS 원본에는 없는 옵션 부가 설명입니다.
• 링크: AlertAction은 우측 column(자세히 보기 등)에 배치됩니다. KRDS는 1개의 관련 링크만 권장합니다.
• 숨기기 금지: KRDS 가이드라인은 긴급 공지 숨기기 버튼을 제공하지 않도록 규정합니다.

구성

Alert
├── AlertBadge — critical-badge pill (권장: svg 아이콘 + 라벨)
│   또는 data-slot이 없는 첫 자식 element를 자동으로 pill로 표시
├── AlertTitle
├── AlertDescription (옵션)
└── AlertAction (옵션)

예제

Basic

variant="info"로 안내 배너를 표시합니다.

import { InfoIcon } from "lucide-react"

import {

Destructive

variant="destructive"로 오류/위험 상태 배너를 표시합니다.

import { AlertCircleIcon } from "lucide-react"

import {

Action

AlertAction으로 우측 column에 버튼이나 링크 같은 동작 요소를 배치합니다.

import {
  Alert,
  AlertAction,

Colors

상태별 variant 5종을 표시합니다.

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

import {

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

"use client"

import * as React from "react"

API 참조

Alert

KRDS 긴급 공지 배너의 루트 컨테이너입니다.

variant 종류별 토큰 매핑

AlertBadge

KRDS critical-badge pill 영역입니다. 권장 사용법은 SVG 아이콘 + 짧은 라벨(긴급/안전/안내 등)을 children으로 넣는 것입니다. AlertBadge 슬롯을 사용하지 않고 Alert의 첫 자식으로 임의 element를 두면 동일 스타일이 자동 적용됩니다(짧은 표기, backward-compatible).

AlertTitle

KRDS critical-txt에 해당하는 본문 메시지(1–2줄)를 표시합니다.

AlertDescription

본문 메시지 아래에 옵션 부가 설명을 표시합니다. KRDS 원본에는 없지만 디자인 가이드라인 안에서 추가 정보 전달이 필요한 경우 사용합니다.

AlertAction

우측 column에 자세히 보기 같은 동작 요소를 배치합니다. KRDS는 1개의 관련 링크만 권장합니다.