Toast

기본

const [open, setOpen] = React.useState(false);

<button
  type="button"
  onClick={() => {
    setOpen(true);
  }}
>
  Open
</button>

<Toast.Root open={open} onOpenChange={setOpen}>
  <Toast.Content >
    Notification
  </Toast.Content>
  <Toast.Viewport />
</Toast.Root>

Placement

const [open, setOpen] = React.useState(false);

<button
  type="button"
  onClick={() => {
    setOpen(true);
  }}
>
  Open
</button>

<Toast.Root open={open} onOpenChange={setOpen}>
  <Toast.Content >
    Notification
  </Toast.Content>
  <Toast.Viewport placement="bottom-right" />
</Toast.Root>

Duration

const [open, setOpen] = React.useState(false);

<button
  type="button"
  onClick={() => {
    setOpen(true);
  }}
>
  Open
</button>

<Toast.Root duration={1000} open={open} onOpenChange={setOpen}>
  <Toast.Content >
    Notification
  </Toast.Content>
  <Toast.Viewport />
</Toast.Root>

Close

const [open, setOpen] = React.useState(false);

<button
  type="button"
  onClick={() => {
    setOpen(true);
  }}
>
  Open
</button>

<Toast.Root open={open} onOpenChange={setOpen}>
  <Toast.Content >
    Notification
    <Toast.Close asChild>
      <button type="button">Undo</button>
    </Toast.Close>
  </Toast.Content>
  <Toast.Viewport />
</Toast.Root>