---
name: Notification
menu: Patterns
parent: Modules
route: /patterns/notification
---

# Notification

Notifications show success, warning, information or error messages to the users.

## Variants

### A basic info notification

```specimen-react
<Notification>Some useful information</Notification>
```

### Success state

Inform our members when an action they've taken has been successfully completed and provide helpful context based information around that action.

```specimen-react
<Notification type="success">Great news! All is well. 🎉</Notification>
```

### Error state

Communicate problems that has occured after a member has taken an action. The error should apply to the whole page.

```specimen-react
<Notification type="error">Oh no! Something bad happened.</Notification>
```

### Warning state

```specimen-react
<Notification type="warning">Something doesn't look quite right. You'd better be careful!</Notification>
```

### With a heading

```specimen-react
<Notification heading="Useful information">Some useful information</Notification>
```

```specimen-react
<Notification heading={<p>Some content</p>}>Some useful content</Notification>
```

### With a call to action

```specimen-react
<Notification
  heading="ERMAGAAD!!"
  cta={<CtaButton purpose="primary">Set up payment</CtaButton>}
>
  You got no payment method set up 😱. You'd best sort this.
</Notification>
```

### With a close handler

If a close handler is provided the CTA will not be rendered

```specimen-react
<Notification
  heading="Some title"
  cta={<CtaButton purpose="primary">Set up payment</CtaButton>}
  onClose={() => alert('You tried to close me!')}
>
  The quick brown fox jumped over the lazy dog
</Notification>
```
