Toast

    () => {
      const [isOpen, setIsOpen] = useState(false);
      return (
        <>
          <Button onClick={() => setIsOpen(!isOpen)}>
            Toggle Toast
          </Button>
          <Toast
            isOpen={isOpen}
            dismissTimeout={2000}
            onDismiss={() => setIsOpen(false)}
          >
            {demoText.s}
          </Toast>
        </>
      )
    }
  

    () => {
      const [neutralIsOpen, setNeutralIsOpen] = useState(false);
      const [dangerIsOpen, setDangerIsOpen] = useState(false);
      const [successIsOpen, setSuccessDangerIsOpen] = useState(false);
      return (
        <>
          <Arrange gap="s">
            <Button onClick={() => {
              setNeutralIsOpen(!neutralIsOpen)
              setDangerIsOpen(false)
              setSuccessDangerIsOpen(false)
            }}>
              Default
            </Button>
            <Button onClick={() => {
              setNeutralIsOpen(false)
              setDangerIsOpen(!dangerIsOpen)
              setSuccessDangerIsOpen(false)
            }}>
              Danger
            </Button>
            <Button onClick={() => {
              setNeutralIsOpen(false)
              setDangerIsOpen(false)
              setSuccessDangerIsOpen(!successIsOpen)
            }}>
              Success
            </Button>
          </Arrange>
          <Toast
            isOpen={neutralIsOpen}
            onDismiss={() => setNeutralIsOpen(false)}
            variant="neutral"
          >
            {demoText.s}
          </Toast>
          <Toast
            isOpen={dangerIsOpen}
            onDismiss={() => setDangerIsOpen(false)}
            variant="danger"
          >
            {demoText.s}
          </Toast>
          <Toast
            isOpen={successIsOpen}
            onDismiss={() => setSuccessDangerIsOpen(false)}
            variant="success"
          >
            {demoText.s}
          </Toast>
        </>
      )
    }