Callout
Callout is the workhorse admonition box : the primitive you reach for when a paragraph needs to say "heads up" without turning into a full section. Info, warning, danger, tip, success : each variant swaps the icon and the accent color.
Basic use
ShellDocs is at 0.1.1-alpha. The primitive surface is stable enough to build real docs sites : expect small API polish through the 0.x.y-alpha window before 1.0.
<Callout Variant="info" Title="Alpha status">
ShellDocs is at `0.1.1-alpha`. The primitive surface is stable enough to build real docs sites : expect small API polish through the `0.x.y-alpha` window before `1.0`.
</Callout>Variants
Five variants, each with its own icon and color:
Neutral, blue-toned. The default.
<Callout Variant="info" Title="Info">Neutral, blue-toned. The default.</Callout>Green, lightbulb icon. Optional side quest, best-practice.
<Callout Variant="tip" Title="Tip">Green, lightbulb icon. Optional side quest, best-practice.</Callout>Amber, triangle icon. Might bite you if you skip it.
<Callout Variant="warning" Title="Watch out">Amber, triangle icon. Might bite you if you skip it.</Callout>Red, X-in-circle icon. Will bite you.
<Callout Variant="danger" Title="Do not">Red, X-in-circle icon. Will bite you.</Callout>Green. Same icon family as tip. Confirmation, completion.
<Callout Variant="success" Title="Nice">Green. Same icon family as `tip`. Confirmation, completion.</Callout>Variant="error" is accepted as an alias for Variant="danger". Same rendering. Use whichever reads better in context.
Titleless
Title is optional : drop it for a bare accent box.
No title, just a line of body content next to the icon.
<Callout Variant="info">
No title, just a line of body content next to the icon.
</Callout>Text-only via attribute
For very short, single-line callouts you can pass the body as a Text attribute instead of child content : useful when authoring nested inside another component tag where wrapping in a child body reads awkwardly.
<Callout Variant="warning" Title="Read-only" Text="This page will be regenerated on next build." />ChildContent wins when both are set.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
Variant |
string |
— | One of `info` | `tip` | `success` | `warning` | `danger` | `error`. Case-insensitive. |
Title |
string? |
— |
Optional bolded title above the body. |
Text |
string? |
— |
Short body content. Ignored when ChildContent is set. |
ChildContent |
RenderFragment? |
— |
Body content. Supports full markdown when authored inline in a `.md` file. |
When to use
- Aside that's important enough to survive skimming
- Warning about a footgun mid-code-walkthrough
- Tip that unlocks the "why" behind a design choice
- Confirmation that a step's expected side effect is correct
When not to use
- Ordinary prose emphasis : just write the sentence
- Multi-paragraph rationale : promote it to a
## Notesection instead - Stacking three callouts in a row : reflow to a single one with structure inside