# Callout

> Info / warning / danger / tip / success box with icon, title, and body.

Source: https://shelldocs.shellui.dev/docs/components/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

```razor
<Callout Variant="info" Title="Alpha status">
ShellDocs is in alpha. The primitive surface is stable enough to build real docs sites : expect small API polish before 1.0.
</Callout>
```

## Variants

Five variants, each with its own icon and color:

```razor
<Callout Variant="info" Title="Info">Neutral, blue-toned. The default.</Callout>
```

```razor
<Callout Variant="tip" Title="Tip">Green, lightbulb icon. Optional side quest, best-practice.</Callout>
```

```razor
<Callout Variant="warning" Title="Watch out">Amber, triangle icon. Might bite you if you skip it.</Callout>
```

```razor
<Callout Variant="danger" Title="Do not">Red, X-in-circle icon. Will bite you.</Callout>
```

```razor
<Callout Variant="success" Title="Nice">Green. Same icon family as tip. Confirmation, completion.</Callout>
```

> **Alias**
>
> `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.

```razor
<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.

```razor
<Callout Variant="warning" Title="Read-only" Text="This page will be regenerated on next build." />
```

`ChildContent` wins when both are set.

## Props

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `Variant` | `string` | `"info"` | 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. |

## Markdown in the body

A `Callout` written straight into the page (an inline tag) takes a markdown body : inline code, emphasis, links, lists and fenced code all work.

> **Inline tag, markdown body**
>
> Run `shelldocs dev`, then open **/docs/introduction**. See [Inline component tags](https://shelldocs.shellui.dev/docs/authoring/component-tags.md).

Inside a `razor:preview` fence the body is parsed as Razor instead, so the source tab shows exactly what you would write in a `.razor` file. Use HTML there (`<code>`, `<strong>`, `<a>`) : markdown syntax would render literally.

## Name collisions

If your component library registers its own `Callout`, `<Callout>` renders yours. ShellDocs' version stays reachable as `<DocsCallout>`. The same holds for every built-in primitive.

## 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 `## Note` section instead
- Stacking three callouts in a row : reflow to a single one with structure inside

## See also

- [Card](https://shelldocs.shellui.dev/docs/components/card.md): Visual grouping without an icon.
- [Steps](https://shelldocs.shellui.dev/docs/components/steps.md): For sequential guidance : each step gets its own numbered rail.