Alert
의미 있는 제목과 설명, 선택적 동작을 제공하는 지속 상태 메시지예요.
핵심 속성
| 속성 | 값 | 기본값 |
|---|---|---|
variant | neutral, info, success, warning, danger | neutral |
role | status, alert 등 네이티브 div role | 없음 |
| parts | Root, Title, Description, Actions | compound API |
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/alert.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRAlert } from '@tinyrack/ui/components/alert';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
상태 variant 고유 링크
모든 상태 색상을 한 번에 세로로 비교할 수 있어요.
공지 역할 사용법 고유 링크
급하지 않은 업데이트에는 status를, 새로 발생한 긴급한 실패에만 alert를 사용하세요. 페이지가 열릴 때부터 있던 내용에는 라이브 영역 역할을 지정하지 마세요.
맥락에 맞는 제목과 줄바꿈되는 동작 고유 링크
페이지 맥락에 맞는 제목 수준을 선택하세요. 동작은 페이지를 넘치게 하지 않고 Alert 안에서 줄바꿈돼요.
API
파트와 기본값
| 파트 | 자체 옵션 또는 기본값 | 동작 |
|---|---|---|
Root | variant="neutral" | div를 렌더링하고 선택한 상태 표현을 적용해요. |
Title | <div /> | Alert 제목 콘텐츠를 렌더링해요. |
Description | <p /> | 보조 콘텐츠를 렌더링해요. |
Actions | <div /> | 선택적 컨트롤을 묶고 줄바꿈을 허용해요. |
합성과 접근성
Root와 Actions는 네이티브 div props와 React 19 ref를 전달해요. Title과 Description은 기본 요소가 주변 의미에 맞지 않을 때 Base UI render 규약을 지원해요. 알림의 긴급성은 애플리케이션 맥락에 따라 달라지므로 Root는 live-region role을 자동으로 지정하지 않아요. status, alert, live-region role 없음 중에서 의도에 맞게 선택하세요.