Callouts
Properties#
| Prop | Type | Default | Description |
|---|---|---|---|
type |
'neutral' 'success' 'danger' 'warning' 'info' |
neutral |
Visual style and default icon. Accepts the aliases warn and information. |
icon |
string |
— | Overrides the default icon for the type. Accepts a built-in icon key (Phosphor or Simple Icons) or a custom URL. |
Examples#
Basic Callout#
This is an informational message.
<scalar-callout type="info">
This is an informational message.
</scalar-callout><Callout type="info">
This is an informational message.
</Callout>All Types#
Neutral message.
Informational message.
Success message.
Warning message.
Something went wrong.
<scalar-callout type="neutral">Neutral message.</scalar-callout>
<scalar-callout type="info">Informational message.</scalar-callout>
<scalar-callout type="success">Success message.</scalar-callout>
<scalar-callout type="warning">Warning message.</scalar-callout>
<scalar-callout type="danger">Something went wrong.</scalar-callout><Callout type="neutral">Neutral message.</Callout>
<Callout type="info">Informational message.</Callout>
<Callout type="success">Success message.</Callout>
<Callout type="warning">Warning message.</Callout>
<Callout type="danger">Something went wrong.</Callout>Custom Icon#
Operation completed successfully!
<scalar-callout type="success" icon="phosphor/regular/check-circle">
Operation completed successfully!
</scalar-callout><Callout type="success" icon="phosphor/regular/check-circle">
Operation completed successfully!
</Callout>MDX Shortcuts#
In MDX, the following named components are equivalent to <Callout> with a preset type:
| Component | Equivalent |
|---|---|
<Note> |
<Callout type="info"> |
<Tip> |
<Callout type="success" icon="lightbulb"> |
<Warning> |
<Callout type="warning"> |
<Danger> |
<Callout type="danger"> |
<Check> |
<Callout type="success"> |
<Info> |
<Callout type="neutral"> |
Useful information that's good to know.
Helpful advice for getting more out of a feature.
Something to be careful about.
Watch out — this can break things.
<Note>Useful information that's good to know.</Note>
<Tip>Helpful advice for getting more out of a feature.</Tip>
<Warning>Something to be careful about.</Warning>
<Danger>Watch out — this can break things.</Danger>