<h4>Default</h4>

```js
initialState = { alertVisible: true };

<div>
    <Button
        onClick={() => {
            setState({ alertVisible: true });
        }}
    >
        SHOW ALERT
    </Button>
    {state.alertVisible && (
        <DismissibleAlert
            style="default"
            titleText="this is a title"
            subtitleText="this is a subtitle"
            buttonText="OK"
            description="this is a description"
            onDismiss={() => setState({ alertVisible: false })}
        >
            This is a dismissible alert
        </DismissibleAlert>
    )}
</div>;
```

---

<h4>Danger</h4>

```js
initialState = { alertVisible: true };

<div>
    <Button
        onClick={() => {
            setState({ alertVisible: true });
        }}
    >
        SHOW ALERT
    </Button>
    {state.alertVisible && (
        <DismissibleAlert
            style="danger"
            titleText="this is a title"
            subtitleText="this is a subtitle"
            buttonText="OK"
            description="this is a description"
            onDismiss={() => setState({ alertVisible: false })}
        >
            This is a dismissible alert
        </DismissibleAlert>
    )}
</div>;
```

---

<h4>Success</h4>

```js
initialState = { alertVisible: true };

<div>
    <Button
        onClick={() => {
            setState({ alertVisible: true });
        }}
    >
        SHOW ALERT
    </Button>
    {state.alertVisible && (
        <DismissibleAlert
            style="success"
            titleText="this is a title"
            subtitleText="this is a subtitle"
            buttonText="OK"
            description="this is a description"
            onDismiss={() => setState({ alertVisible: false })}
        >
            This is a dismissible alert
        </DismissibleAlert>
    )}
</div>;
```

---

<h4>Warning</h4>

```js
initialState = { alertVisible: true };

<div>
    <Button
        onClick={() => {
            setState({ alertVisible: true });
        }}
    >
        SHOW ALERT
    </Button>
    {state.alertVisible && (
        <DismissibleAlert
            style="warning"
            titleText="this is a title"
            subtitleText="this is a subtitle"
            buttonText="OK"
            description="this is a description"
            onDismiss={() => setState({ alertVisible: false })}
        >
            This is a dismissible alert
        </DismissibleAlert>
    )}
</div>;
```
