Toast
A short notice that floats over the page, so it is the one surface allowed a shadow; cards have none. The design system page animates it in and out; the component itself is still.
Saved
Your draft is saved. This is a demo, so nothing was sent.
Controls
Code
import { Toast } from "@/components/ui/kit/feedback";
<Toast
label="Saved"
closeLabel="Dismiss"
onClose={dismiss}
>
Your draft is saved. This is a demo, so nothing was sent.
</Toast>Every state
Saved
Your draft is saved. This is a demo, so nothing was sent.
Usage
Tokens it uses
| --surface | … |
|---|---|
| --line-2 | … |
| --ink | … |
| --muted | … |
| --spark | … |
| --font-label | … |
| --font-body | … |
Values are read live from the stylesheet, so they follow the site theme.