---
name: notification
title: Notification
components:
  - sd-button
  - sd-link
  - sd-notification
  - sd-paragraph
version: 1.0.0
---

## Template: Info Notification

```html
<style>
  sd-notification.info-variant::part(message) {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>

<sd-notification class="info-variant" variant="info" open>
  Editing is restricted
  <sd-button variant="secondary" class="mr-4">Request to edit</sd-button>
</sd-notification>
```

## Template: Info Toast Notification

```html
<sd-button
  variant="secondary"
  data-notification-type="info"
  data-notification-position="bottom-center"
  class="toast-button"
>
  Show toast
</sd-button>

<script>
  var button = document.querySelector('.toast-button');

  function notifyBottomCenter(variant = 'info') {
    const notification = Object.assign(document.createElement('sd-notification'), {
      closable: true,
      variant: variant,
      toastStack: 'bottom-center',
      duration: Infinity,
      innerHTML: 'Event deleted <sd-button class="ml-4" variant="secondary" size="sm">Undo</sd-button>'
    });

    notification.style.width = '250px';

    document.body.append(notification);
    return notification.toast();
  }

  button.addEventListener('click', () => {
    notifyBottomCenter(button.getAttribute('data-notification-type'));
  });
</script>
```

## Template: Success Notification

```html
<style>
  sd-notification.success-variant::part(message) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
</style>

<sd-notification class="success-variant" variant="success" open>
  <b>Congratulations</b>
  <p class="sd-paragraph">You have successfully subscribed.</p>
</sd-notification>
```

## Template: Error Notification

```html
<sd-notification variant="error" open closable>
  <p class="sd-paragraph">
    A problem occurred while submitting your data. <sd-link size="inherit" href="#">More information</sd-link>
  </p>
</sd-notification>
```

## Template: Warning Notification

```html
<sd-notification variant="warning" open>
  <b>Update information</b>
  <p class="sd-paragraph">You have 7 days left to update your billing information.</sd-link></p>
  <sd-button variant="secondary" class="mt-4">More information</sd-button>
</sd-notification>
```