Toast

Helper required

This component requires a helper. Make sure to read the documentation carefully so you know how to use it.

Usage

'Read the “', Usage, '” section'

Preview

Show Toast

Code

ToastExample.astro

---
import { Toaster, Button } from 'studiocms:ui/components';
---

<!-- Add this to the root of your page: -->
<Toaster />

<Button color='primary' id='trigger'>
  Show Toast
</Button>

Script Tag

import { toast } from 'studiocms:ui/components';

const trigger = document.getElementById('usage-trigger')!;
trigger.addEventListener('click', () => {
  toast({
    title: 'This is a toast!',
    description: 'Hi there!',
    type: 'info',
  });
});

Position

'Read the “', Position, '” section'

You can change where all toasts are displayed via the position prop on the <Toaster /> component:

ToastPosition.astro

---
import { Toaster } from 'studiocms:ui/components';
---

<Toaster position='top-left' />
<Toaster position='top-center' />
<Toaster position='top-right' />
<Toaster position='bottom-left' />
<Toaster position='bottom-center' />
<Toaster position='bottom-right' />

Duration

'Read the “', Duration, '” section'

There’s two ways to set a toast’s duration: via the default on the <Toaster /> component or via the toast({ ... }) function.

You can set the default duration like this:

ToastDuration.astro

---
import { Toaster } from 'studiocms:ui/components';
---

<Toaster duration={10000} />

Or you can set it individually for every toast like this:

ToastDuration.ts

import { toast } from 'studiocms:ui/components';

toast({
  title: 'This is a toast!',
  description: 'Hi there!',
  type: 'info',
  duration: 10000
});

Persistence

'Read the “', Persistence, '” section'

Sometimes, you don’t need a toast to expire after a set time. Instead of setting the toast to only expire after 31 days, you can set it to be persistent by setting persistent to true:

ToastPersistence.ts

import { toast } from 'studiocms:ui/components';

toast({
  title: 'This is a toast!',
  description: 'Hi there!',
  type: 'info',
  persistent: true
});

Close Button

'Read the “', Close Button, '” section'

Unless a toast is persistent, you can choose to hide the close button by setting the closeButton option to false:

ToastCloseButton.ts

import { toast } from 'studiocms:ui/components';

toast({
  title: 'This is a toast!',
  description: 'Hi there!',
  type: 'info',
  closeButton: false
});

Offset & Gap

'Read the “', Offset & Gap, '” section'

You can change how far the toasts are away from the screen’s edge by changing the offset prop on the <Toaster />:

ToastOffset.astro

---
import { Toaster } from 'studiocms:ui/components';
---

<!-- Offset in pixels -->
<Toaster offset={64} />

You can also change by how much toasts are separated via the gap prop on the <Toaster />:

ToastGap.astro

---
import { Toaster } from 'studiocms:ui/components';
---

<!-- Gap in pixels -->
<Toaster gap={32} />