Toast

Usage

Preview
Code

1
---
2
import { Button } from 'studiocms:ui/components/button';
3
import { Toaster } from 'studiocms:ui/components/toaster';
4
---
5

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

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

1
import { 
const toast: (props: ToastProps) => void
toast } from 'studiocms:ui/components/toaster';
2

3
const 
const trigger: HTMLElement
trigger = 
var document: Document
MDN Reference
document.
Document.getElementById(elementId: string): HTMLElement | null
Returns a reference to the first object with the specified value of the ID attribute.
@param ― elementId String that specifies the ID value.
getElementById('trigger')!;
4
const trigger: HTMLElement
trigger.
HTMLElement.addEventListener<"click">(type: "click", listener: (this: HTMLElement, ev: MouseEvent) => any, options?: boolean | AddEventListenerOptions): void (+1 overload)
Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.
The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.
When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.
When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.
When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.
If an AbortSignal is passed for options's signal, then the event listener will be removed when signal is aborted.
The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.
MDN Reference
Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.
The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.
When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.
When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.
When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.
If an AbortSignal is passed for options's signal, then the event listener will be removed when signal is aborted.
The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.
MDN Reference
addEventListener('click', () => {
5
  
function toast(props: ToastProps): void
A function to create toasts with.
@param ― props The props to pass to the toast
toast({
6
    
ToastProps.title: string
title: 'This is a toast!',
7
    
ToastProps.description?: string
This will get passed to the component as unsanitized HTML. DO NOT PUT USER-GENERATED CONTENT HERE!
description: 'Hi there!',
8
    
ToastProps.type: "info" | "success" | "warning" | "danger"
type: 'info',
9
  });
10
});

Position

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

1
---
2
import { Toaster } from 'studiocms:ui/components/toaster';
3
---
4

5
<Toaster position='top-left' />
6
<Toaster position='top-center' />
7
<Toaster position='top-right' />
8
<Toaster position='bottom-left' />
9
<Toaster position='bottom-center' />
10
<Toaster position='bottom-right' />

Duration

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:

1
---
2
import { Toaster } from 'studiocms:ui/components/toaster';
3
---
4

5
<Toaster duration={10000} />

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

1
import { 
const toast: (props: ToastProps) => void
toast } from 'studiocms:ui/components/toaster';
2

3
function toast(props: ToastProps): void
A function to create toasts with.
@param ― props The props to pass to the toast
toast({
4
  
ToastProps.title: string
title: 'This is a toast!',
5
  
ToastProps.description?: string
This will get passed to the component as unsanitized HTML. DO NOT PUT USER-GENERATED CONTENT HERE!
description: 'Hi there!',
6
  
ToastProps.type: "info" | "success" | "warning" | "danger"
type: 'info',
7
  
ToastProps.duration?: number
duration: 10000
8
});

Persistence

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:

1
import { 
const toast: (props: ToastProps) => void
toast } from 'studiocms:ui/components/toaster';
2

3
function toast(props: ToastProps): void
A function to create toasts with.
@param ― props The props to pass to the toast
toast({
4
  
ToastProps.title: string
title: 'This is a toast!',
5
  
ToastProps.description?: string
This will get passed to the component as unsanitized HTML. DO NOT PUT USER-GENERATED CONTENT HERE!
description: 'Hi there!',
6
  
ToastProps.type: "info" | "success" | "warning" | "danger"
type: 'info',
7
  
ToastProps.persistent?: boolean
persistent: true
8
});

Close Button

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

1
import { 
const toast: (props: ToastProps) => void
toast } from 'studiocms:ui/components/toaster';
2

3
function toast(props: ToastProps): void
A function to create toasts with.
@param ― props The props to pass to the toast
toast({
4
  
ToastProps.title: string
title: 'This is a toast!',
5
  
ToastProps.description?: string
This will get passed to the component as unsanitized HTML. DO NOT PUT USER-GENERATED CONTENT HERE!
description: 'Hi there!',
6
  
ToastProps.type: "info" | "success" | "warning" | "danger"
type: 'info',
7
  
ToastProps.closeButton?: boolean
closeButton: false
8
});

Offset & Gap

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

1
---
2
import { Toaster } from 'studiocms:ui/components/toaster';
3
---
4

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

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

1
---
2
import { Toaster } from 'studiocms:ui/components/toaster';
3
---
4

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