# Install

```shell
npm i @mate-react/notification-bar
```

# Import

```tsx
import { MateNotificationBar } from '@mate-react/notification-bar';
import { MateNotification } from '@mate-react/notification';
```

# Variants

## Info Alert Bar

```tsx
<MateNotificationBar theme="info alert" closeButtonVisible>
  Hinweis zu bevorstehenden Wartungsarbeiten.
</MateNotificationBar>
```

## Warning Alert Bar

```tsx
<MateNotificationBar theme="warning alert" closeButtonVisible>
  Warnung: Bitte speichern Sie Ihre Arbeit.
</MateNotificationBar>
```

## Error Alert Bar

```tsx
<MateNotificationBar theme="danger alert" closeButtonVisible>
  <span>Ihr Browser wird nicht unterstützt.</span>
  <MateButton slot="action">Details anzeigen</MateButton>
</MateNotificationBar>
```

## Toast (Default)

```tsx
<MateNotification position="top-center" duration={0} opened={opened} onOpenedChanged={e => setOpened(e.detail.value)}>
  <MateNotificationBar closeButtonVisible>
    Sie verwenden jetzt Softwareversion 2.0
  </MateNotificationBar>
</MateNotification>
```

## Toast (Success)

```tsx
<MateNotification position="top-center" theme="success" duration={0} opened={opened} onOpenedChanged={e => setOpened(e.detail.value)}>
  <MateNotificationBar closeButtonVisible>
    Datensatz erfolgreich gespeichert.
  </MateNotificationBar>
</MateNotification>