Banner
사용자에게 상황에 맞는 정보나 알림을 제공합니다.
Live Demo
Type
Info banner message
Success banner message
Warning banner message
Error banner message
Usage
Full width banner
Inline banner
With Action / Close
Banner with action and close buttons
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "info" | "success" | "warning" | "error" | "info" | Banner의 상태를 설정합니다. |
| usage | "inline" | "full" | "inline" | Banner의 layout을 설정합니다. |
| surfaceColor | "light" | "default" | "light" | Banner의 surface 색상을 설정합니다. |
| children | ReactNode | - | Banner에 출력할 메시지 컨텐츠입니다. |
| actionButton | boolean | false | Action 버튼 노출 여부를 설정합니다. |
| actionButtonText | string | - | Action 버튼 텍스트를 설정합니다. |
| onActionClick | () => void | - | Action 버튼 클릭 핸들러를 설정합니다. |
| closeButton | boolean | false | Close 버튼 노출 여부를 설정합니다. |
| onClose | () => void | - | Close 버튼 클릭 핸들러를 설정합니다. |
Anatomy
- Container
- Message
- Icon
- Icon button (optional)