title: "Notification" slug: "/packages/notification" category: "general" componentNames:

• "Notification"

Notificaiton

The Notification component can be used to display smaller pieces of text informing the user or signalling success/failure.

import Notification from "@ds-kit/notification"

Simple example

A simple example of Notification would look like this:

<Notification variant="success">Example success notification text</Notification>

Notification variants

Use the variant prop to select one of four available variants (success, info, alert, danger).

<>
  <Notification variant="success">
    Example success notification text
  </Notification>
  <Notification variant="info">Example info notification text</Notification>
  <Notification variant="alert">Example alert notification text</Notification>
  <Notification variant="danger">Example danger notification text</Notification>
</>