Callout

Import

import { Callout } from '@delightstack/components';

Basic Usage

Your changes are automatically saved.

View code

<Callout>
  Your changes are automatically saved.
</Callout>

Examples

Variants

Use boolean props to set the visual variant. When none is set, the default info style is used.

Info (default)

This is an informational callout.

View code

<Callout>
  This is an informational callout.
</Callout>

Success

Your changes have been saved successfully.

View code

<Callout success>
  Your changes have been saved successfully.
</Callout>

Warning

Heads up

This action cannot be undone.

View code

<Callout warning title="Heads up">
  This action cannot be undone.
</Callout>

Error

Failed to connect to the server. Please try again.

View code

<Callout error>
  Failed to connect to the server. Please try again.
</Callout>

Tip

Pro Tip

Press Cmd+K to open the command palette.

View code

<Callout tip title="Pro Tip">
  Press Cmd+K to open the command palette.
</Callout>

Dismissible

Add dismissible to show a close button. Use ondismiss to handle the event.

Pro Tip

You can use keyboard shortcuts to speed up your workflow.

View code

<script>
  import { Callout } from '@delightstack/components';

  let visible = $state(true);
</script>

{#if visible}
  <Callout tip title="Pro Tip" dismissible ondismiss={() => (visible = false)}>
    You can use keyboard shortcuts to speed up your workflow.
  </Callout>
{/if}

Custom Icon and Action

Override the default icon or add an action area using snippets.

New feature available! Check out our latest update with improved performance and new components.

Learn more

View code

<script>
  import { Callout } from '@delightstack/components';
  import { Button } from '@delightstack/components';
</script>

<Callout>
  {#snippet icon()}
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
      <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
      <path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
    </svg>
  {/snippet}

  New feature available! Check out our latest update with improved performance.

  {#snippet action()}
    <Button size="0" transparent>Learn more</Button>
  {/snippet}
</Callout>

Banner Mode

Set banner for a full-width banner with solid background. Combine with sticky to pin it to the top on scroll.

We've updated our privacy policy. Please review the changes.

Learn more

Scheduled maintenance tonight at 11pm UTC.

View code

<script>
  import { Callout } from '@delightstack/components';

  let showBanner = $state(true);
</script>

{#if showBanner}
  <Callout banner dismissible ondismiss={() => showBanner = false}>
    We've updated our privacy policy. Please review the changes.

    {#snippet action()}
      <a href="/privacy">Learn more</a>
    {/snippet}
  </Callout>
{/if}

<Callout banner warning>
  Scheduled maintenance tonight at 11pm UTC.
</Callout>

Dense and Comfortable Spacing

Compact callout with less padding.

Spacious callout with more padding.

View code

<Callout dense>Compact callout with less padding.</Callout>

<Callout comfortable>Spacious callout with more padding.</Callout>

Skeleton Loading

Show loaded

View code

<Callout skeleton={loading}>…</Callout>

Props

Prop	Type	Default	Description
success	boolean	false	Success variant (green)
warning	boolean	false	Warning variant (yellow/orange)
error	boolean	false	Error variant (red)
tip	boolean	false	Tip variant (accent/purple)
banner	boolean	false	Full-width banner mode with solid background
title	string	''	Optional heading text
dismissible	boolean	false	Show close/dismiss button
sticky	boolean	false	Stick to top on scroll (banner mode only)
dense	boolean	false	Compact padding
comfortable	boolean	false	Relaxed padding
skeleton	boolean	false	Show loading skeleton state
id	string	auto	Element ID
class	string	''	Additional CSS classes
children	Snippet	-	Main content
icon	Snippet	-	Custom icon (overrides default variant icon)
action	Snippet	-	Action area (button, link, etc.)

Events

Event	Detail	Description
ondismiss	() => void	Called when the dismiss button is clicked

Accessibility

• Uses role="alert" for warning and error variants
• Uses role="status" for info, success, and tip variants
• Banner mode renders as a semantic <aside> element, inline mode uses <div>
• Icon has aria-hidden="true"
• Dismiss button has aria-label="Dismiss"
• Respects prefers-reduced-motion (disables slide/scale animations)