Esta página aún no está disponible en tu idioma.
You can change where all toasts are displayed via the position
prop on the <Toaster />
component:
---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' />
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:
---import { Toaster } from '@studiocms/ui/components';---
<Toaster duration={10000} />
Or you can set it individually for every toast like this:
import { function toast(props: ToastProps): void
A function to create toasts with.
toast } from '@studiocms/ui/components';
function toast(props: ToastProps): void
A function to create toasts with.
toast({ ToastProps.title: string
title: 'This is a toast!', ToastProps.description?: string
This will get passed to the component as unsanitized HTML. DO NOT PUT USER-GENERATED CONTENT HERE!
description: 'Hi there!', ToastProps.type: "info" | "success" | "warning" | "danger"
type: 'info', ToastProps.duration?: number
duration: 10000});
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
:
import { function toast(props: ToastProps): void
A function to create toasts with.
toast } from '@studiocms/ui/components';
function toast(props: ToastProps): void
A function to create toasts with.
toast({ ToastProps.title: string
title: 'This is a toast!', ToastProps.description?: string
This will get passed to the component as unsanitized HTML. DO NOT PUT USER-GENERATED CONTENT HERE!
description: 'Hi there!', ToastProps.type: "info" | "success" | "warning" | "danger"
type: 'info', ToastProps.persistent?: boolean
persistent: true});
Unless a toast is persistent, you can choose to hide the close button by setting the closeButton
option to false
:
import { function toast(props: ToastProps): void
A function to create toasts with.
toast } from '@studiocms/ui/components';
function toast(props: ToastProps): void
A function to create toasts with.
toast({ ToastProps.title: string
title: 'This is a toast!', ToastProps.description?: string
This will get passed to the component as unsanitized HTML. DO NOT PUT USER-GENERATED CONTENT HERE!
description: 'Hi there!', ToastProps.type: "info" | "success" | "warning" | "danger"
type: 'info', ToastProps.closeButton?: boolean
closeButton: false});
You can change how far the toasts are away from the screen’s edge by changing the offset
prop on the <Toaster />
:
---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 />
:
---import { Toaster } from '@studiocms/ui/components';---
<!-- Offset in pixels --><Toaster gap={32} />