Banner and callout
Inline notices. A banner leads with a spark rule; a callout takes a tone — info, warning or success — and says it in words.
Variant
Info
Something worth knowing.
Controls
▾
Code
import { Callout } from "@/components/ui/kit/feedback";
<Callout title="Info" body="Something worth knowing." />Every state
Banner
Notice
A banner with the spark rule.
A neutral banner.
Callout
Info
Something worth knowing.
Warning
Check this before you go on.
Done
It worked.
Usage
Tokens it uses
| --paper-2 | … |
|---|---|
| --line | … |
| --ink | … |
| --ink-2 | … |
| --ok | … |
| --ok-tint | … |
| --warn | … |
| --warn-tint | … |
| --font-display | … |
| --font-body | … |
Values are read live from the stylesheet, so they follow the site theme.