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
  • info
  • warning
  • success
  • danger
title
Title of the callout

Slots

Name
Description
default
Content of the callout
icon
Icon to display before the content, or before the title if there is one.
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.

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.