Components

Alert

Docs

API 사용가이드 및 옵션값을 설명합니다. 기본 스타일·프리뷰는 Overview를 참고하세요.

API

Alert · AlertTitle · AlertContents 합성 API입니다. variant · position · onClose는 Root에 필수이고, 문구는 필요한 조각만 조합합니다. className으로 ClaBi 기본 스타일을 덮을 수 있습니다.

import { Alert, AlertTitle, AlertContents } from "@/components/alert";

{/* Block */}
<Alert variant="fail" position="inline" onClose={() => setOpen(false)}>
  <AlertTitle>오류</AlertTitle>
  <AlertContents>요청을 처리하지 못했습니다.</AlertContents>
</Alert>

{/* Inline — Contents만 */}
<Alert variant="info" position="inline" onClose={() => setOpen(false)}>
  <AlertContents>참고할 안내 사항이 있습니다.</AlertContents>
</Alert>

{/* 소비 앱 className 커스텀 */}
<Alert variant="warning" position="inline" onClose={() => setOpen(false)}>
  <AlertTitle className="text-base">주의</AlertTitle>
  <AlertContents className="text-text-default">
    확인이 필요합니다.
  </AlertContents>
</Alert>

Props

Name	Type	Default	Description
`variant`Required	`"success" \| "fail" \| "warning" \| "info"`	—	의미/긴급도(State). 색상·기본 아이콘·AlertTitle 기본 색에 반영됩니다.
`position`Required	`"inline" \| "top" \| "center" \| "bottom"`	—	표시 위치. inline는 문서 흐름, top·center·bottom은 뷰포트 고정(오버레이).
`children`Required	`React.ReactNode`	—	AlertTitle · AlertContents 조합. AlertTitle이 있으면 Block(상단 정렬), 없으면 Inline(세로 중앙).
`AlertTitle`	`component`	—	제목 조각. 기본: text-sm font-semibold + variant 토큰 색. className으로 덮기.
`AlertContents`	`component`	—	본문 조각. 기본: text-sm text-text-secondary. className으로 덮기.
`icon`	`React.ReactNode \| boolean`	`true`	true: variant 기본 아이콘, false: 숨김, ReactNode: 커스텀 아이콘.
`role`	`React.AriaRole`	—	접근성 role. 기본은 상황에 맞는 알림 role을 사용합니다.
`className`	`string`	—	Root 컨테이너 추가 클래스.

Events

Name	Signature	Description
`onClose`	`() => void`	필수. 닫기 버튼은 항상 표시되며, 클릭 시 호출됩니다. 부모에서 open 상태를 해제하세요.

Notes

소비 앱 필수: React 19, Tailwind CSS v4, ClaBi tokens.css(+ @theme 매핑), clsx, buttonVariants(닫기 버튼).
clsx 패키지가 필수입니다. className 병합에 import { clsx } from "clsx" 를 사용합니다.
AlertTitle · AlertContents는 Alert 안에서만 사용합니다. 기본은 ClaBi 토큰, 덮어쓰기는 각 조각의 className.
문서 흐름에 넣을 때는 반드시 position="inline"을 명시합니다.
에러·경고처럼 즉각 인지가 필요하면 position을 top/center와 함께 검토합니다.
onClose에서 반드시 노출 상태를 해제합니다. 닫기 버튼은 모든 Alert에 포함됩니다.
장문·복수 CTA가 필요하면 Alert 대신 Dialog/페이지 내 안내 패턴을 사용합니다.