Callout

The callout/alert component is used to highlight important information.

Properties

Name
Description
type
Defines the type of callout (used for colors). Can be one of:
  • soft (default)
  • info
  • warning
  • success
  • danger
title
Title of the callout
showIcon
Whether to show an icon. Defaults to true, showing the icon matching type unless a custom icon snippet is given. Set to false to hide the icon entirely.
fg
Custom text/border color, overriding type. If bg is not also set, a matching background is derived from it.
bg
Custom background color, overriding type. If fg is not also set, a matching text/border color is derived from it.

Slots

Name
Description
default
Content of the callout
icon
Icon to display before the content, or before the title if there is one. Overrides the default icon for type.
title
Title of the callout

Examples

Types

<Callout type="soft">This is a soft callout.</Callout>
<Callout type="info">This is an info callout.</Callout>
<Callout type="warning">This is a warning callout.</Callout>
<Callout type="success">This is a success callout.</Callout>
<Callout type="danger">This is a danger callout.</Callout>
This is a soft callout.
This is an info callout.
This is a warning callout.
This is a success callout.
This is a danger callout.

Each type shows a matching icon by default. Set showIcon=false to hide it.

<Callout type="info" showIcon={false}>This is an info callout without an icon.</Callout>
This is an info callout without an icon.

Callout with Title

<Callout type="info">
    {#snippet title()}
        <div>This is a title</div>
    {/snippet}
    This is a callout with a title.
</Callout>
This is a title
This is a callout with a title.

Callout with Icon

<Callout type="info">
    {#snippet icon()}
        <div>👋</div>
    {/snippet}
    This is a callout with an icon.
</Callout>
👋
This is a callout with an icon.

Callout with Icon and Title

<Callout type="danger">
    {#snippet icon()}
        <div>⛔️</div>
    {/snippet}
    {#snippet title()}
        <div>This is a title</div>
    {/snippet}
    This is a callout with an icon and a title.
</Callout>
⛔️
This is a title
This is a callout with an icon and a title.

Callout with Title Prop

<Callout type="info">
    {#snippet icon()}
        <div>👋</div>
    {/snippet}
    {#snippet title()}
        <div>hi there</div>
    {/snippet}
    This is a callout with an icon and a title.
</Callout>
👋
hi there
This is a callout with an icon and a title.

Custom Foreground / Background

Use fg and/or bg to go outside the built-in types. Set just one and a matching pair is derived automatically; set both for full control.

<Callout fg="#7c3aed">Only "fg" is set, "bg" is derived from it.</Callout>
<Callout bg="#d9f2e6">Only "bg" is set, "fg" is derived from it.</Callout>
<Callout fg="#7c3aed" bg="#efe6fc">Both "fg" and "bg" are set explicitly.</Callout>
Only "fg" is set, "bg" is derived from it.
Only "bg" is set, "fg" is derived from it.
Both "fg" and "bg" are set explicitly.

Multi-paragraph Callout

<Callout type="info" title="Heads up">
    <p>This is the first paragraph of the callout.</p>
    <p>This is the second paragraph, to check that the line height and spacing between paragraphs look right.</p>
    <p>And a third one, just to be sure it holds up with more content.</p>
</Callout>
Heads up

This is the first paragraph of the callout.

This is the second paragraph, to check that the line height and spacing between paragraphs look right.

And a third one, just to be sure it holds up with more content.