Toast
사용자 동작의 결과를 잠깐 알려 줘요. 화면 오른쪽 아래에 쌓여요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
API 키를 만들었어요
키는 지금 한 번만 보여 줘요.
API 키를 만들었어요
키는 지금 한 번만 보여 줘요.
API 키를 만들었어요
키는 지금 한 번만 보여 줘요.
API 키를 만들었어요
키는 지금 한 번만 보여 줘요.
사용법
- 앱 최상단에 ToastProvider 한 번Next.js는 layout.tsx. useToast는 클라이언트 컴포넌트에서만 써요.
- 다른 컴포넌트와 구분되돌릴 수 없는 동작의 확인은 AlertDialog, 화면을 채우는 실패는 ErrorState예요.
- 화면 낭독기보통은 차례가 오면 읽고, danger는 바로 읽어요. 마우스를 올리거나 포커스하면 시간이 멈춰요.
Props
| prop | 값 | 기본값 |
|---|---|---|
| title | 결과 한 줄 (필수) | — |
| description | 덧붙일 설명 | — |
| tone | neutral · success · warning · danger | neutral |
| timeout | 사라지기까지 ms, 0이면 직접 닫을 때까지 | 5000 |
코드
tsx
const toast = useToast();
toast.add({ title: 'API 키를 만들었어요', description: '키는 지금 한 번만 보여 줘요.', tone: 'success' });