---
title: Notifications
---

<script>
  import { Button, Notifications, notify } from 'slender-ui'
  import { ComponentContainer } from '$lib'

  let lyricIndex = 0, colorIndex = 0

  const lyrics = [
    "Ain't nobody",
    "Loves me better ",
    "Makes me happy",
    "Makes me feel this way",
    "Ain't nobody",
    "Loves me better, than you"
  ]

  const colors = [
    'success',
    'info',
    'warning',
    'danger'
  ]

  const handleClick = () => {
    notify({ title: lyrics[lyricIndex], color: colors[colorIndex] })

    lyricIndex = (lyricIndex + 1) % lyrics.length
    colorIndex = (colorIndex + 1) % colors.length
  }
</script>

A toast, a flash, a notification... you get the gist.

Let's toast, let's roast, then flash it away. It's a notification, go hover and it's here to stay.

<ComponentContainer>
  <Button class="px-10" color="primary" on:click={ handleClick }>
    Skål
  </Button>
</ComponentContainer>

<noscript>
  <div class="text-center w-full text-gray-500">
    <small><em>Ironically, you need JavaScript enabled to see this demo.</em></small>
  </div>
</noscript>

Probably my favourite of the components, as these make an SSR'd, no-JS site real slick.

```svelte
<!-- __layout.svelte -->
<script>
  import { Notifications } from 'slender-ui'
</script>

<Notifications>
  <slot />
</Notifications>
```

You can either pass in an array of notifications to the component (great for JS-less SSR)...

```svelte
<script>
  ...
  const notifications = [
    {
      title: 'Well hello',
      color: 'success'
    }
  ]
</script>

<Notifications {notifications}>
  <slot />
</Notifications>
```

...or use the exported `notify` function from anywhere in the component subtree:

```svelte
<!-- SomeComponent.svelte -->
<script>
  import { notify } from 'slender-ui'

  notify({ title: "One, two, three o'clock, four o'clock, rock" })
</script>
```

Although this works without JavaScript, ironically you'll need it enabled for this demo.

These use some tasty CSS magic to do away with the JS. Having said that, you need to enable it for the demo: