Callout

Alert-style callout boxes for tips, warnings, errors, and informational content.

Preview

Info
This is an informational callout with useful context.
Warning
Be careful with this operation — it cannot be undone.
Success
Your changes have been saved successfully.
Error
Something went wrong. Please try again.
Tip
You can use keyboard shortcuts for faster navigation.
With Title
Did you know?

Signals automatically track dependencies and update only what changed.

Usage

tsx
import { Callout } from "@semajsx/ui/components/callout";

<Callout type="info">Helpful information here.</Callout>
<Callout type="warning" title="Warning">This action is destructive.</Callout>
<Callout type="tip">Pro tip: use signals for fine-grained reactivity.</Callout>

Props

PropTypeDefaultDescription
type"info" | "warning" | "success" | "error" | "tip""info"Callout type
titlestringOptional title above content
childrenJSXNodeCallout content