---
name: Alert
menu: Components
route: /components/alert
---

import { Playground, PropsTable } from 'docz'
import { Alert, Button, Dismissable } from '@personio/ui-components'
import { State, Toggle } from 'react-powerplug'
import './alert.scss'

# Alert
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

<PropsTable of={Alert} />

## Examples
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the contextual themes.

<Playground>
  <div className="alert-container">
    <Alert theme="info">Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna</Alert>
    <Alert theme="success">Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna</Alert>
    <Alert theme="danger">Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna Lorem ipsum dolor simet at magna</Alert>
  </div>
</Playground>

## Actions

<Playground>
  <div className="alert-container">
    <Alert
      theme="success"
      actions={(
        <React.Fragment>
          <Button>Some action</Button>
          <Button>Another action</Button>
        </React.Fragment>
      )}
    >
      Lorem ipsum dolor simet at magna
    </Alert>
  </div>
</Playground>

## Dismissing

<Playground>
  <div className="alert-container">
    <State initial={{ active: false }}>
      {({ state, setState }) => (
        <div>
          {!state.active && (
            <div className="btn-dismiss">
              <Button theme="primary" onClick={() => {
                setState({ active: true })
              }}>
                After press the alert will hide in 3 seconds
              </Button>
            </div>
          )}
          <Dismissable active={state.active} duration={3000}>
            <Alert theme="success">
              Lorem ipsum dolor simet at magna
            </Alert>
          </Dismissable>
        </div>
      )}
    </State>
  </div>
</Playground>


