Toast

() => {
const [isOpen, setIsOpen] = React.useState(false)
return (
  <>
    <Button onClick={() => setIsOpen(true)} variant="primary">
      Trigger Toast
    </Button>
    <Toast
      isOpen={isOpen}
      onCloseClick={() => setIsOpen(false)}
    >
      Message sent!
    </Toast>
  </>
)}

() => {
const [isOpen, setIsOpen] = React.useState(false)
return (
  <>
    <Button onClick={() => setIsOpen(true)} variant="primary">
      Trigger Toast
    </Button>
    <Toast
      isOpen={isOpen}
      onCloseClick={() => setIsOpen(false)}
    >
      <Arrange alignItems="start" gap="small">
        <Icon icon={<SvgLink />} />
        <Text>You successfully changed Mira Baptista’s role from Viewer to Creator. Please review the email we sent you ok thx bye this is really long wow so long!</Text>
      </Arrange>
    </Toast>
  </>
)}

() => {
const [isOpen, setIsOpen] = React.useState(false)
return (
  <>
    <Button onClick={() => setIsOpen(true)} variant="primary">
      Trigger Toast
    </Button>
    <Toast
      isOpen={isOpen}
      onCloseClick={() => setIsOpen(false)}
      duration="long"
    >
      <Text>You have successfully learnt that the short timeout is 3s and long is 8s. </Text>
    </Toast>
  </>
)}