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>
  )
}

() => {
  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>
  )
}

() => {
  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>
  )
}

() => {
  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>
  )
}

() => {
  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>
  )
}

() => {
  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>
  )
}

() => {
  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>
  )
}

() => {
  const toasts = useToasts()

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