Alert
본문 흐름 안에 계속 남아 있는 상태와 다음 행동을 설명합니다.
- 성숙도
- 후보
- 소스 경로
components/ui/alert.tsx- 소스
- 소스
- 외부 의존성
@phosphor-icons/react
실제 미리보기
발행 정보를 확인합니다
제목과 공개 날짜를 한 번 더 확인해 주세요.
사용할 때
사용 기준
정보, 성공, 주의, 오류가 다음 작업과 함께 남아야 할 때 씁니다.
사용하지 않을 때
짧게 끝난 결과나 명시적 결정에는 Toast나 Alert Dialog를 씁니다.
변형과 상태
info고정 예시왼쪽 상태 신호와 제목으로 정보를 구분합니다.
발행 정보를 확인합니다
제목과 공개 날짜를 한 번 더 확인해 주세요.warning고정 예시주의 상태와 다음 행동을 구체적으로 적습니다.
확인이 필요합니다
제목과 공개 날짜를 한 번 더 확인해 주세요.error고정 예시오류 원인과 가능한 복구 동작을 함께 제공합니다.
발행하지 못했습니다
제목과 공개 날짜를 한 번 더 확인해 주세요.live고정 예시새 긴급 상태만 alert로 발표합니다.
발행하지 못했습니다
제목과 공개 날짜를 한 번 더 확인해 주세요.
접근성
보이는 제목으로 영역을 이름 붙이고 새 긴급 오류에만 live를 사용합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
title | ReactNode | 아니요 | 기존 사용법을 위한 단축 제목입니다. |
variant | "info" | "success" | "warning" | "error" | 아니요 | 상태의 의미입니다. |
live | boolean | 아니요 | 새 긴급 상태를 즉시 발표합니다. |
사용 예시
지원 importimport {
Alert,
AlertIcon,
AlertContent,
AlertTitle,
AlertDescription,
AlertAction,
} from "@/components/ui/alert"
<Alert variant="error">
<AlertContent>
<AlertTitle>Save failed</AlertTitle>
<AlertDescription>Review the title.</AlertDescription>
</AlertContent>
<AlertAction>Retry</AlertAction>
</Alert>