# Component/Banner

사용자의 작업 흐름을 방해하지 않으면서 중요한 정보나 상태를 화면에 고정 노출하는 컴포넌트.
추가 액션을 유도하거나 X를 눌러 닫을 수 있습니다.

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `className` | `string | undefined` | No |  |  |
| `status` | `undefined "neutral" "info" "error" "warning" "success"` | No | info |  |
| `size` | `undefined "xsmall" "small" "medium"` | No | medium |  |
| `direction` | `undefined "horizontal" "vertical"` | No | horizontal |  |
| `leftIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  | title 좌측에 렌더링 될 아이콘 요소  - title이 없을 경우 렌더되지 않습니다.  - Icon 컴포넌트 color props가 있더라도 status 따라 currentColor가 지정됩니다.  - Icon 컴포넌트 size props가 있더라도 Icon 사이즈는 banner size 'medium'일경우 16, 'small'일경우 12로 고정됩니다. |
| `showIcon` | `boolean | undefined` | No | true |  |
| `title` | `string | undefined` | No |  |  |
| `message` | `ReactNode` | No |  |  |
| `actions` | `ReactNode` | No |  | 배너 우측에 렌더링 될 extra actions |
| `closable` | `boolean | undefined` | No | false | 배너 우측에 렌더링 될 CloseButton 사용 유무 |
| `onClose` | `(() => void) | undefined` | No |  |  |