Components / Callout
Callout
Alert/notice with semantic variants. Neutral card background, colored icon + title, normal description text.
feedbackv0.1.0
Playground
Examples
Variants
<cg-stack gap="sm"><cg-callout variant="info" title="Info" description="This is an informational message."></cg-callout><cg-callout variant="success" title="Success" description="Operation completed successfully."></cg-callout><cg-callout variant="warning" title="Warning" description="Please review before proceeding."></cg-callout><cg-callout variant="danger" title="Error" description="Something went wrong."></cg-callout><cg-callout variant="neutral" title="Note" description="This is a neutral callout."></cg-callout></cg-stack>Dismissible
<cg-callout variant="info" title="Heads up" description="You can dismiss this callout." dismissible></cg-callout>Import
import { CgCallout } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-callout';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "info" | "success" | "warning" | "danger" | "neutral" | "info" | Semantic variant |
title | string | — | Callout title (colored by variant) |
description | string | — | Description text (normal color) |
dismissible | boolean | false | Show close button |
rounded | "none" | "sm" | "md" | "lg" | "full" | "lg" | Border radius variant |
Events
| Event | Detail | Description |
|---|---|---|
cg-callout-dismiss | {} | Fired when dismissed |