---
name: Banner alert
route: /components/common/banner-alert
edit: false
---

import { Playground, Props } from 'docz'
import { State } from 'react-powerplug'
import BannerAlert from './banner-alert'
import CallToActionWithArrow from '../call-to-action-with-arrow/call-to-action-with-arrow'

# BannerAlert
**SUBCATEGORY:** Feedback

<hr />

## Banner alert
### Description
Banner alerts communicate important information, often appearing before all other content.
They are usually temporary, and dismissible by the user.
Variants may include icons to provide additional context or meaning.
Additional CTA can be displayed if component is provided in button prop.

<Playground>
<State initial={{ isClosed: false }}>
  {({ state, setState }) => (
  <BannerAlert
    text="Alert text lede."
    description="Alert text description."
    handleClose={() => setState({isClosed: true}) }
    isClosed={state.isClosed}
    />
  )}
</State>
</Playground>

**Success**

<Playground>
<State initial={{ isClosed: false }}>
  {({ state, setState }) => (
  <BannerAlert
    variant='success'
    text="Alert text lede."
    description="Alert text description."
    handleClose={() => setState({isClosed: true}) }
    isClosed={state.isClosed}
    />
  )}
</State>
</Playground>

**Warning**

<Playground>
<State initial={{ isClosed: false }}>
  {({ state, setState }) => (
  <BannerAlert
    variant='warning'
    text="Alert text lede."
    description="Alert text description."
    handleClose={() => setState({isClosed: true}) }
    isClosed={state.isClosed}
    />
    )}
  </State>
</Playground>

**Error**

<Playground>
<State initial={{ isClosed: false }}>
  {({ state, setState }) => (
  <BannerAlert
    variant='error'
    text="Alert text lede."
    description="Alert text description."
    handleClose={() => setState({isClosed: true}) }
    isClosed={state.isClosed}
    />
    )}
  </State>
</Playground>

**With CTA**

<Playground>
<State initial={{ isClosed: false }}>
  {({ state, setState }) => (
  <BannerAlert
    variant='error'
    text="Alert text lede."
    description="Alert text description."
    handleClose={() => setState({isClosed: true}) }
    isClosed={state.isClosed}
    closable={false}
    button={<CallToActionWithArrow href='/buttonLink' text='buttonText' />}
    />
    )}
  </State>
</Playground>

<hr />

## Properties
<Props of={BannerAlert} />