Toast
Display an important message globally.
Default
Code Editor
() => {const toasts = useToasts()return (<ButtononClick={() => {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 (<ButtononClick={() => {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 (<ButtononClick={() => {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 (<ButtononClick={() => {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 (<ButtononClick={() => {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 (<ButtonsuccessonClick={() => {if (toasts && toasts.current) {toasts.current.success('The Netherland Dwarf jumped over the fence.')}}}>Show Toast</Button>)}
Error
Code Editor
() => {const toasts = useToasts()return (<ButtonerroronClick={() => {if (toasts && toasts.current) {toasts.current.error('The Netherland Dwarf jumped over the fence.')}}}>Show Toast</Button>)}