# Notification
> Use notifications to notify users about important events.

Choose the notification component appropriately to its relevance of
notifications, as they can be interruptive. We offer these components:

- Inline notifications, these are minimal invasive as they blend into the interface

- Toaster notifications,
  these draw some more attention, without being too interruptive as text appear
  temporary on a the edge of the screen

- Modal notifications, these force the
  user to perceive them as they block the whole screen until the user interacted
  with it

There are four types of notifications, each with their own styles: info, warning, error, and success.

- Info: use this when the notification is only a "good to know" information

- Warning: use this when the notification informs about a potential issue

- Error: use this to inform the user about an error that has occurred

- success: use this to give feedback about a successfully performed action

## Inline notifications

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Use inline notifications whenever you the screen does not change and you
      just need to add a information. This is for example often used for error
      messages within a form, which stop the form from being closed
      successfully.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Inline notification appear within the content. They should be as close as
      possible to the element that they refer to or that has triggered the
      notification.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Inline notifications can either be shown on start a view (if they are
      static) or they can pop up (if they are dynamic). They may disappear when
      they are not of relevance any longer. (e.G. an error notification in a
      form disappears when the user has solved the issue)
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/components/notification">Notification</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

## Toasters

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Use toast notifications when you want the user to perceive the message
      without interrupting them too much.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Toast notifications convey short messages + an icon to indicate the type
      (info, warning, error or success). They may also carry a button to open a
      modal, which can be used to show longer messages.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Toast notifications appear temporary. We recommend to show them at the top
      right corner of the screen. They should be visible for some seconds and
      disappear automatically.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/components/toaster">Toaster</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

## Modals

<DataList.Root orientation="vertical" emphasize="label">
  <DataList.Row>
    <DataList.Label>When to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Use a modal notification when there is a sincere message that the user has
      to perceive.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Description</DataList.Label>
    <DataList.Value marginTop="spacingS">
      Modal notifications block the user by popping up above the regular screen.
      This way it is ensured, that the user perceives it.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Behaviour</DataList.Label>
    <DataList.Value marginTop="spacingS">
      The modal pop ups above the regular content, center aligned. It closes
      only on user interaction.
    </DataList.Value>
  </DataList.Row>
  <DataList.Row>
    <DataList.Label>Components to use</DataList.Label>
    <DataList.Value marginTop="spacingS">
      <ul margin="none">
        <li>
          <Link href="/components/dialog">Dialog</Link>
        </li>
      </ul>
    </DataList.Value>
  </DataList.Row>
</DataList.Root>

## When not to use

- Do not notify users about information that is currently on screen (e.g. active chat conversations)

- Do not notify users about technical operations that do not require user involvement (such as syncing)

- Do not notify users about error messages that can be resolved without user action