# Component/Banner
> Props: component-banner.props.txt
## Examples
### Base
```tsx
{
args: {
title: 'Title',
message: 'Info Banner Message'
}
}
```
### Custom Icon
```tsx
{
render: () => {
const custom_icons: { [key in BannerStatus]: React.ReactElement } = {
neutral: ,
info: ,
error: ,
success: ,
warning:
} as const;
return
{(['neutral', 'info', 'error', 'warning', 'success'] as BannerStatus[]).map(status => {
return ;
})}
;
}
}
```
### Direction
```tsx
{
args: {
actions:
Action
,
closable: true,
onClose: () => alert('onClose')
},
render: args =>
horizontal
vertical
}
```
### No Body Text
```tsx
{
args: {
title: 'Info Banner Title'
}
}
```
### No Icon
```tsx
{
args: {
status: 'info',
title: 'Title',
message: 'Info Banner Message',
showIcon: false
}
}
```
### No Title
```tsx
{
args: {
message: 'Info Banner Message'
}
}
```
### Size
```tsx
{
args: {
actions:
Action
,
closable: true,
onClose: () => alert('onClose')
},
render: args =>
}
```
### Status
```tsx
{
render: () =>
{(['neutral', 'info', 'error', 'success', 'warning'] as BannerStatus[]).map(status => {
return
Action
} />;
})}
}
```
### With Action Close
```tsx
{
args: {
status: 'info',
title: 'Title',
message: 'Info Banner Message',
actions:
Action
,
closable: true,
onClose: () => alert('onClose')
}
}
```
### Word Break
```tsx
{
render: () =>
Action
} />
}
```