---
name: Alert
menu: Components
---

# Alert

import Alert from './index'
import { Playground, Props } from 'docz'
import './style/index.scss'
import Button from '../button/index'

## Props & Methods
<Props of={ Alert } />

## Types
<Playground>
    <Alert type="success">Well done! You successfully read this important alert message.</Alert><div style={{height: '10px'}}></div>
    <Alert type="info">Heads up! This alert needs your attention, but it's not super important.</Alert><div style={{height: '10px'}}></div>
    <Alert type="warning">Warning! Better check yourself, you're not looking too good.</Alert><div style={{height: '10px'}}></div>
    <Alert type="danger">Oh snap! Change a few things up and try submitting again.</Alert><div style={{height: '10px'}}></div>
    <Alert type="global">Gobal alert: <em>appears at the top of all the web page.</em></Alert><div style={{height: '10px'}}></div>
    <Alert type="module">Module alert: <em>this is an alert inside the module</em></Alert>
</Playground>

## Links
<Playground>
    <Alert type="success">This is a sucess alert with <a href="#">an example link</a>. Give it a click if you like.</Alert><div style={{height: '10px'}}></div>
    <Alert type="info">This is an info alert with <a href="#">an example link</a>. Give it a click if you like.</Alert><div style={{height: '10px'}}></div>
    <Alert type="warning">This is a warning alert with <a href="#">an example link</a>. Give it a click if you like.</Alert><div style={{height: '10px'}}></div>
    <Alert type="danger">This is a danger alert with <a href="#">an example link</a>. Give it a click if you like.</Alert><div style={{height: '10px'}}></div>
    <Alert type="global">This is a global alert with <a href="#">an example link</a>. Give it a click if you like.</Alert><div style={{height: '10px'}}></div>
    <Alert type="module">This is a module alert with <a href="#">an example link</a>. Give it a click if you like.</Alert>
</Playground>

## Visible
<Playground>
{() => {
    class Example extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                visible: true,
            };
        }
        render(){
            return <>
              <Alert visible={this.state.visible}>
                      I shall sit down on the pavement when I'm tired
                      And gobble up samples in shops and press alarm bells
                      And run my stick along the public railings
                      And make up for the sobriety of my youth.
              </Alert>
              <Button color="weak" size="s" onClick={() => {
                  this.setState({
                      visible: !this.state.visible,
                  });
              }} style={{marginTop: '10px'}}>toggle the visible state</Button>
            </>
        }
    }
    return <Example/>
    }
}
</Playground>

## Closeable
<Playground>
    <Alert type="warning" closeable={false}>This is a warning alert that you cannot close.</Alert>
    <div style={{height: '10px'}}></div>
    <Alert type="warning" closeable={true}>This is a warning alert that you can close. Give it a try.</Alert>
</Playground>

## onClose
<Playground>
          <Alert onClose={() => {
            alert('onClose called');
          }}>
            You can wear terrible shirts and grow more fat
            And eat three pounds of sausages at a go
            Or only bread and pickle for a week
            And hoard pens and pencils and beermats and things in boxes.
            But now we must have clothes that keep us dry
            And pay our rent and not swear in the street
            And set a good example for the children.
            We must have friends to dinner and read the papers.
            But maybe I ought to practice a little now?
            So people who know me are not too shocked and surprised
            When suddenly I am old, and start to wear purple.
          </Alert>
</Playground>