---
name: Notification
route: /components/common/notification
edit: false
---

import { Playground, Props } from 'docz'
import { Counter } from 'react-powerplug'
import Notification from './notification'
import SlimButton from '../slim-button/slim-button'

# Notification
**SUBCATEGORY:** Feedback

<hr />

## Notification
### Description
For communicating helpful information. Notifications often appear inline, nearby where a change has taken place. They automatically disappear after a few seconds.

<Playground>
    <Counter initial={null}>
      {({ count, inc, dec }) => (
        <>
          <div style={{ display: 'flex', width: '50%' }}>
            <Notification notificationId={count} text='Temporary notification text.' time={4000} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '20px' }}>
              <SlimButton secondary onClick={() => { inc() }}>
                 Show notification
              </SlimButton>
          </div>
        </>
      )}
    </Counter>
</Playground>

**Success**

<Playground>
    <Counter initial={null}>
      {({ count, inc, dec }) => (
        <>
          <div style={{ display: 'flex', width: '50%' }}>
            <Notification notificationId={count} text='Temporary notification text.' time={4000} variant='success' />
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '20px' }}>
              <SlimButton secondary onClick={() => { inc() }}>
                 Show notification
              </SlimButton>
          </div>
        </>
      )}
    </Counter>
</Playground>

**Warning**

<Playground>
    <Counter initial={null}>
      {({ count, inc, dec }) => (
        <>
          <div style={{ display: 'flex', width: '50%' }}>
            <Notification notificationId={count} text='Temporary notification text.' time={4000} variant='warning' />
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '20px' }}>
              <SlimButton secondary onClick={() => { inc() }}>
                 Show notification
              </SlimButton>
          </div>
        </>
      )}
    </Counter>
</Playground>

**Error**

<Playground>
    <Counter initial={null}>
      {({ count, inc, dec }) => (
        <>
          <div style={{ display: 'flex', width: '50%' }}>
            <Notification notificationId={count} text='Temporary notification text.' time={4000} variant='error' />
          </div>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '20px' }}>
              <SlimButton secondary onClick={() => { inc() }}>
                 Show notification
              </SlimButton>
          </div>
        </>
      )}
    </Counter>
</Playground>

<hr />

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