사용법
톤
variant로 안내·성공·주의·오류 톤을 구분해요. title로 핵심 메시지를 강조해요.
안내
새 버전이 배포됐어요. 새로고침하면 반영돼요.
완료
문서가 저장됐어요.
주의
연결이 불안정해요. 잠시 후 다시 시도해주세요.
오류
권한이 없어요. 관리자에게 문의해주세요.
스타일 커스터마이징
Alert 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<Alert
className="shadow-md"
style={{
--gtd-alert-accent: "#059669",
}}
/>classNames 슬롯
복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.
<Alert
classNames={{
root: "my-alert-root",
icon: "my-alert-icon",
content: "my-alert-content",
title: "my-alert-title"
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-alert-accent | 좌측 악센트·아이콘 색 |
| --gtd-alert-bg | 배경색 |
| --gtd-alert-border-color | 테두리색 |
인터페이스
AlertProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| variant | "info" | "success" | "warning" | "error" | info | 메시지 톤 |
| title | string | — | 강조 제목 |
Alert 컴포넌트 Props 표
가져오기
import { Alert } from "@/components/ui/Alert";