Callout
Highlight an aside, warning, tip, or note inline with a colored block.
Use a callout to flag content the reader should not miss in the flow of a page. The type prop swaps the icon and accent color.
Bloques deploys when changes land on the default branch.
<Callout type="info">
Bloques deploys when changes land on the default branch.
</Callout>Props
| Prop | Type | Default |
|---|---|---|
type | "info" | "warning" | "error" | "success" | "note" | "info" |
Types
Info
Bloques deploys when changes land on the default branch.
<Callout type="info">
Bloques deploys when changes land on the default branch.
</Callout>Warning
Renaming a page changes its URL and breaks existing links.
<Callout type="warning">
Renaming a page changes its URL and breaks existing links.
</Callout>Error
An invalid docs.json fails the deploy and the last good version keeps
serving.
<Callout type="error">
An invalid `docs.json` fails the deploy and the last good version keeps
serving.
</Callout>Success
Your custom domain is verified and live.
<Callout type="success">Your custom domain is verified and live.</Callout>Note
The homepage at index.mdx renders at the site root, not in the sidebar.
<Callout type="note">
The homepage at `index.mdx` renders at the site root, not in the sidebar.
</Callout>Shorthand tags
Each shorthand tag maps to a fixed type — drop the prop.
Note
Skippable aside.
<Note>Skippable aside.</Note>Warning
Destructive action ahead.
<Warning>Destructive action ahead.</Warning>Info
Background context.
<Info>Background context.</Info>Tip
Non-obvious shortcut.
<Tip>Non-obvious shortcut.</Tip>