Toast

Display an important message globally.

Default

Code Editor
() => {
const toasts = useToasts()
return (
<Button
onClick={() => {
if (toasts && toasts.current) {
toasts.current.message({
text: 'The Netherland Dwarf jumped over the fence.'
})
}
}}
>
Show Toast
</Button>
)
}

Multiline

Code Editor
() => {
const toasts = useToasts()
return (
<Button
onClick={() => {
if (toasts && toasts.current) {
toasts.current.message({
text: 'The Netherland Dwarf jumped over the fence. The Netherland Dwarf jumped over the fence. The Netherland Dwarf jumped over the fence. The Netherland Dwarf jumped over the fence.'
})
}
}}
>
Show Toast
</Button>
)
}

Preserve

Preserved toasts will not automatically disappear.

Code Editor
() => {
const toasts = useToasts()
return (
<Button
onClick={() => {
if (toasts && toasts.current) {
toasts.current.message({
text: 'The Netherland Dwarf jumped over the fence.',
preserve: true
})
}
}}
>
Show Toast
</Button>
)
}

Action

Code Editor
() => {
const toasts = useToasts()
return (
<Button
onClick={() => {
if (toasts && toasts.current) {
toasts.current.message({
text: 'The Netherland Dwarf jumped over the fence. The Netherland Dwarf jumped over the fence again.',
action: 'Undo'
})
}
}}
>
Show Toast
</Button>
)
}

Action + Cancel

Code Editor
() => {
const toasts = useToasts()
return (
<Button
onClick={() => {
if (toasts && toasts.current) {
toasts.current.message({
text: 'The Netherland Dwarf jumped over the fence. The Netherland Dwarf jumped over the fence again.',
action: 'Undo',
cancelAction: 'Cancel'
})
}
}}
>
Show Toast
</Button>
)
}

Success

Code Editor
() => {
const toasts = useToasts()
return (
<Button
success
onClick={() => {
if (toasts && toasts.current) {
toasts.current.success('The Netherland Dwarf jumped over the fence.')
}
}}
>
Show Toast
</Button>
)
}

Error

Code Editor
() => {
const toasts = useToasts()
return (
<Button
error
onClick={() => {
if (toasts && toasts.current) {
toasts.current.error('The Netherland Dwarf jumped over the fence.')
}
}}
>
Show Toast
</Button>
)
}