Components
Toast
사용자에게 일시적인 알림 메시지를 표시하는 토스트 컴포넌트입니다. 자동으로 사라지며, 수동으로 닫을 수도 있습니다.
Preview
다양한 변형(variant)의 토스트를 확인할 수 있습니다.
Toast with Action
액션 버튼이 포함된 토스트입니다.
Usage
import { ToastProvider, useToast } from "@kui-ui/react";
// 앱 루트에 Provider를 감싸주세요.
<ToastProvider>
<App />
</ToastProvider>
// 컴포넌트 내에서 useToast 훅으로 사용합니다.
function MyComponent() {
const { toast, dismiss } = useToast();
const handleClick = () => {
toast({
title: "저장 완료",
description: "변경 사항이 저장되었습니다.",
variant: "success",
});
};
return <Button onClick={handleClick}>저장</Button>;
}Variants
| Variant | Description |
|---|---|
default | 기본 알림 |
success | 성공 알림 (녹색 왼쪽 보더) |
error | 오류 알림 (빨간색 왼쪽 보더) |
warning | 경고 알림 (주황색 왼쪽 보더) |
info | 정보 알림 (파란색 왼쪽 보더) |
Props
toast() options
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | 토스트 제목 |
description | string | — | 토스트 본문 텍스트 |
variant | "default" | "success" | "error" | "warning" | "info" | "default" | 토스트 변형 |
duration | number | 5000 | 자동 닫힘 시간 (ms). 0이면 자동 닫힘 비활성화 |
action | { label: string; onClick: () => void } | — | 액션 버튼 |
ToastProvider Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | 하위 컴포넌트 |
maxToasts | number | 5 | 최대 표시 토스트 수 |
Accessibility
role="status"및aria-live="polite"적용으로 스크린 리더 지원aria-label="Close notification"닫기 버튼- 키보드 포커스 가능한 닫기 및 액션 버튼
- 자동 닫힘 타이머로 알림 관리