Used to highlight an important information to the user that they cannot just hide. It can be configured to automatically disappear using the autoClose and autoCloseTimeout properties, but may as well be persistent.

This is assigned the alert role.

See also:

• Nag component looks similar but features a close (x) button and is assigned alertdialog

type Examples

<div style={{
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'space-between',
  height: '260px' }}>
  <Notification type="error">Error notification</Notification>
  <Notification type="success">Success notification</Notification>
  <Notification type="notice">Notice notification</Notification>
  <Notification type="neutral">Neutral notification</Notification>
</div>

autoClose Example (will close after 5 seconds)

<Switch active>
  {({ active, toggle }) =>
    active ? (
      <Notification type="error" autoClose onAutoClose={toggle}>
         Oops, that didn't work. Try again, please.
      </Notification>
    ) : (
      <Button variant="white" onClick={toggle}>
        show
      </Button>
    )
  }
</Switch>

actions (as a function) Example

<Notification
    type="success"
    actions={() => (
      <div>
        <Button variant="linkWhite" onClick={() => alert('Do something')}>
          Resend activation email
        </Button>
        <Button variant="linkWhite" onClick={() => alert('Do something')} disabled>
          Disabled button
        </Button>
      </div>
    )}
  >
    <span>Account created. Please, follow activation instructions sent to your email.</span>
</Notification>

actions (as a Node) Example

<Notification
    type="notice"
    actions={
      <div>
        <Button variant="linkDark" onClick={() => alert('Do something')}>
          Do something
        </Button>
        <Button variant="linkDark" onClick={() => alert('Do something else')}>
          Do something else
        </Button>
      </div>
    }
  >
    <span>Hang on, we need you to do something.</span>
</Notification>