import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Banner } from './banner';
import { BannerBase } from '..';
# Banner
The `Banner` component is used for inline notifcations and has different colors based on context's severity.
## Props
The `Banner` accepts all props below as well as all [Box](/docs/components-ui-box--default-story#props) component props
The `Banner` accepts all `BannerBase` component props below
### Severity
Use the `severity` prop and the `SEVERITIES` object from `./ui/helpers/constants/design-system.js` to change the context of `Banner`.
Optional: `BANNER_SEVERITIES` from `./banner` object can be used instead of `SEVERITIES`.
Possible options:
- `SEVERITIES.INFO` Default
- `SEVERITIES.WARNING`
- `SEVERITIES.DANGER`
- `SEVERITIES.SUCCESS`
```jsx
import { Banner } from '../../component-library';
import { SEVERITIES } from '../../../helpers/constants/design-system';
This is a demo of severity Info.
This is a demo of severity Warning.
This is a demo of severity Danger.
This is a demo of severity Success.
```
### Title
Use the `title` prop to pass a string that is sentence case no period. Use the `titleProps` prop to pass additional props to the `Text` component.
```jsx
import { Banner } from '../../component-library';
Pass only a string through the title prop
;
```
### Children
The `children` is the description area of the `Banner` that can be a text or react node. Description shouldn't repeat title and only 1-3 lines.
```jsx
import { SIZES } from '../../../helpers/constants/design-system';
import { Banner } from '../../component-library';
{`Description shouldn't repeat title. 1-3 lines. Can contain a `}
hyperlink.
;
```
### Action Button Label, onClick, & Props
Use the `actionButtonLabel` prop to pass text, `actionButtonOnClick` prop to pass an onClick handler, and `actionButtonProps` prop to pass an object of [ButtonLink props](/docs/components-componentlibrary-buttonlink--default-story) for the action
```jsx
import { Banner, ICON_NAMES } from '../../component-library';
console.log('ButtonLink actionButtonOnClick demo')}
>
Use actionButtonLabel for action text, actionButtonOnClick for the onClick
handler, and actionButtonProps to pass any ButtonLink prop types such as
iconName
;
```
### On Close
Use the `onClose` prop to pass a function to the close button. The close button will appear when this prop is used.
Additional props can be passed to the close button with `closeButtonProps`
```jsx
import { Banner } from '../../component-library';
console.log('close button clicked')}
>
Click the close button icon to hide this notifcation
;
```