Toast

Messages stacked in a corner of the screen. Kobalte's Toast renders each message as li role="status", which takes the same styling as an alert.

alpha The class names and states here are stable. The look is not: these styles can change in a minor release, without a major version bump.

Class	Does what
`toast`	The fixed stack in the corner
`toast-title`	A bold first line inside a message
`toast-description`	Muted body text inside a message

Basic

The stack is shown in place here rather than fixed to the corner.

<ul class="toast" style="position: static; max-width: 22rem">
  <li class="alert">
    <span>
      <span class="toast-title">Saved</span><br />
      <span class="toast-description">Your changes are live.</span>
    </span>
  </li>
  <li class="alert alert-error">
    <span>
      <span class="toast-title">Upload failed</span><br />
      <span class="toast-description">We could not reach the server.</span>
    </span>
  </li>
</ul>

<ul class="toast" style="position: static; max-width: 22rem">
  <li class="alert">
    <span>
      <span class="toast-title">Saved</span><br />
      <span class="toast-description">Your changes are live.</span>
    </span>
  </li>
  <li class="alert alert-error">
    <span>
      <span class="toast-title">Upload failed</span><br />
      <span class="toast-description">We could not reach the server.</span>
    </span>
  </li>
</ul>

import { Toast, toaster } from "@kobalte/core/toast";

// once, near the root
<Toast.Region>
  <Toast.List class="toast" />
</Toast.Region>

// anywhere
toaster.show(props => (
  <Toast toastId={props.toastId}>
    <Toast.Title class="toast-title">Saved</Toast.Title>
    <Toast.Description class="toast-description">
      Your changes are live.
    </Toast.Description>
    <Toast.CloseButton class="btn btn-ghost">×</Toast.CloseButton>
  </Toast>
));

<div class="toast" style="position: static; max-width: 22rem">
  <ol>
    <li role="status" data-opened>
      <span>
        <span class="toast-title">Saved</span><br />
        <span class="toast-description">Your changes are live.</span>
      </span>
    </li>
    <li role="status" data-opened class="alert-error">
      <span>
        <span class="toast-title">Upload failed</span><br />
        <span class="toast-description">We could not reach the server.</span>
      </span>
    </li>
  </ol>
</div>

Toast.Region is role="region", which accordion panels and page landmarks also use, so the stack takes .toast by hand. The messages inside it need no classes.