The line of prose that belongs between rows: what a setting is for, why one is switched off, what a value will cost. Four tones, each with its own mark, and the same text size as the rows around it.
The import and the props worth knowing about, in one place.
import { InspectorNote } from "@/components/beste/component/inspector-note";
// Quiet by default
<InspectorNote>Applies to every page in this project.</InspectorNote>
// Louder, when the reader is about to be surprised
<InspectorNote tone="warning">This overrides the theme value.</InspectorNote>
<InspectorNote tone="info">Only used when the section has no background of its own.</InspectorNote>
<InspectorNote tone="danger">Removing this cannot be undone.</InspectorNote>
<InspectorNote
tone="info"
size="sm" // "sm" | "default" | "lg"
icon={SparklesIcon} // replaces the mark the tone brings
>
Generated once and then cached.
</InspectorNote>
// Or with no mark at all
<InspectorNote hideIcon>Values are in pixels.</InspectorNote>
// The warning and danger tones are announced when they appear, since a warning that
// turns up beside a control the reader is already using has to reach them.Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | The note. One or two sentences: anything longer belongs in the docs. |
tone | "muted" | "info" | "warning" | "danger" | "muted" | What kind of note this is, which is also how it looks. |
size | "sm" | "default" | "lg" | "default" | Padding preset. |
icon | LucideIcon | — | Icon shown before the text. Each tone but `muted` brings its own, so this is for replacing one, or for giving `muted` a mark of its own. |
hideIcon | boolean | — | Drop the icon the tone brought with it. |
className | string | — |