Callout
Highlight an aside, warning, or error inline with a block set apart from the page text.
Use a callout to flag content the reader should not miss in the flow of a page. The type prop sets the color and the icon. note is neutral and carries no icon; the other four each get an accent color and an icon.
Bloques deploys when changes land on the default branch.
<Callout type="note">
Bloques deploys when changes land on the default branch.
</Callout>Props
| Prop | Type | Default |
|---|---|---|
type | "note" | "info" | "warning" | "success" | "error" | "note" |
Types
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>Info
Pages are ordered by the nav array in your config, not alphabetically.
<Callout type="info">
Pages are ordered by the `nav` array in your config, not alphabetically.
</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>Success
Your custom domain is verified and live.
<Callout type="success">Your custom domain is verified and live.</Callout>Error
The deployment failed. Check the build logs.
<Callout type="error">The deployment failed. Check the build logs.</Callout>Shorthand tags
Each type has a shorthand tag. Drop the prop and use the tag directly.
| Shorthand | Same as |
|---|---|
<Note> | <Callout type="note"> |
<Info> | <Callout type="info"> |
<Warning> | <Callout type="warning"> |
<Success> | <Callout type="success"> |
<Error> | <Callout type="error"> |
Destructive action ahead.
<Warning>Destructive action ahead.</Warning>Deprecated tags
<Tip> still renders, as a success callout. Replace it with <Success>.