Callout

High-visibility information container panel built with panel radius (--radius-panel) and semantic colors.

// Plain markup
import { Callout } from "@shavin/ui";

Tones (default icon)

This tracker is visible to everyone you've shared it with.

Payment recorded — this item is now marked done for the month.

This item is due in 2 days and has no reminder set.

Deleting this tracker permanently removes its history. This can't be undone.

<Callout color="accent">This tracker is visible to everyone you've shared it with.</Callout>
<Callout color="success">Payment recorded — this item is now marked done for the month.</Callout>
<Callout color="warning">This item is due in 2 days and has no reminder set.</Callout>
<Callout color="danger">Deleting this tracker permanently removes its history. This can't be undone.</Callout>

Custom icon

Enable notifications to get reminded before this bill is due.

<Callout color="warning" icon={<BellIcon />}>
  Enable notifications to get reminded before this bill is due.
</Callout>

No icon

A plain tinted note with no icon slot.

<Callout color="accent" icon={null}>
  A plain tinted note with no icon slot.
</Callout>

Props

Prop	Type	Default
title	string	—
icon	React.ReactNode	—
color	"neutral" \| "accent" \| "success" \| "warning" \| "danger"	"neutral"