Notice
A notice is one sentence beside the thing it is about. Error and success read the same way to everyone because they carry words, not only colour.
Tones
Couldn't load this queue. Check your connection and try again.
Two rules overlap. The first match runs.
Replies are drafted by KiBee until you take over.
Rule saved. It runs on the next request.
The queue refreshes every minute.
Show code
<KbNotice tone="ruby">Couldn't load this queue. Check your connection and try again.</KbNotice>
<KbNotice tone="gold">Two rules overlap.</KbNotice>
<KbNotice tone="sky">Replies are drafted by KiBee.</KbNotice>
<KbNotice tone="teal">Rule saved.</KbNotice>
<KbNotice>The queue refreshes every minute.</KbNotice>Plain
Plain drops the plate for a one-line readout under a form.
Changes saved.
Show code
<KbNotice tone="teal" plain>Changes saved.</KbNotice>When to use
- Put the notice next to the thing it is about, in one sentence.
- Say what happened and what to do. Don't write Invalid or Error.
- A breach or failed automation is a persistent notice, never a timed toast.
- Toast is for confirmations only, such as Assigned to you. It is never ruby.
Couldn't save the rule. Check the name and try again.
Error
Import
import { KbNotice } from "@/components/ui/KbNotice";
<KbNotice tone="teal">Rule saved. It runs on the next request.</KbNotice>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
tone | "ink" | "sky" | "teal" | "ruby" | "gold" | "ink" | Ruby is an error, teal success, gold attention, sky information, ink a note. |
plain | boolean | false | No plate. |
toast | boolean | false | Fixed at the bottom and fades. Confirmations only. |
role | "status" | "alert" | "note" | None | Defaults to alert for ruby and status otherwise. |
Keyboard and screen readers
- Ruby announces immediately (role alert); every other tone announces politely (role status).
- Each tone pairs a subtle fill with its matching text role, so contrast is 4.5:1 or better.
- The sentence carries the meaning; colour only backs it.