docs / content

<tc-callout>

Admonition box with five variants — note, info, success, warning, danger. Built-in icon and optional title.

import "@ra9/tan-compose-kit/callout"

Props

Name	Type	Default	Description
`variant`	`"note" \| "info" \| "warning" \| "danger" \| "success"`	`"note"`	Visual style and icon. `danger` also gets `role="alert"`.
`title`	`string`	`""`	Optional bolded heading line above the body.
`compact`	`boolean`	`false`	Tighter padding for inline / dense use.

Slots

Slot	Description
`(default)`	Body content. Paragraphs, links, lists — anything inline-block.

CSS variables

Variable	Default	Description
`--tc-callout-radius`	`var(--tc-radius-md, 8px)`	Corner radius.
`--tc-callout-font`	`var(--tc-font-sans, …)`	Font family.
`--tc-callout-note-bg`	`var(--tc-color-surface-alt, #faf8f3)`	Note background.
`--tc-callout-note-fg`	`var(--tc-color-ink-soft, #4a5061)`	Note foreground.
`--tc-callout-note-border`	`var(--tc-color-rule-strong, #d9cfb8)`	Note left border + icon color.
`--tc-callout-info-bg`	`var(--tc-color-info-bg, #dde6f4)`	Info background.
`--tc-callout-info-fg`	`var(--tc-color-info-fg, #1f3a66)`	Info foreground.
`--tc-callout-success-bg`	`var(--tc-color-success-bg, #dbece2)`	Success background.
`--tc-callout-success-fg`	`var(--tc-color-success-fg, #155b40)`	Success foreground.
`--tc-callout-warning-bg`	`var(--tc-color-warning-bg, #f5e7cf)`	Warning background.
`--tc-callout-warning-fg`	`var(--tc-color-warning-fg, #7a4f0a)`	Warning foreground.
`--tc-callout-danger-bg`	`var(--tc-color-danger-bg, #f4dad7)`	Danger background.
`--tc-callout-danger-fg`	`var(--tc-color-danger-fg, #7a1a14)`	Danger foreground.

Examples

Variants

The default variant — small reminders or asides.

A friendly piece of context.

Use sparingly — only for true positive outcomes.

Something the user should be aware of before continuing.

Destructive or breaking. Use `role="alert"` semantics.

<tc-callout variant="note" title="Heads up"> The default variant — small reminders or asides. </tc-callout> <tc-callout variant="warning" title="Migration note"> This API will be removed in v2. Switch to <code>build()</code> by next release. </tc-callout>

Without a title

Drop the title for short single-paragraph notes.

Components are tree-shakable — only the tags you import ship to the browser.

Compact

Smaller padding and font for inline use.

Beta feature — interface may change before the v1 release.

<tc-callout variant="warning" compact> Beta feature — interface may change before the v1 release. </tc-callout>

Rich content

Paragraphs, lists, and links all work inside the callout body.

<tc-callout variant="info" title="Three things to know"> <ul> <li>It ships zero runtime to consumers.</li> <li>It works without a build step.</li> <li>It's published to JSR — no npm dependency.</li> </ul> </tc-callout>

Theming

Each variant has its own bg / fg / border tokens. Override one or all of them.

<tc-callout variant="info" style="--tc-callout-info-bg: #e0f2fe; --tc-callout-info-border: #0284c7;" title="Custom blue" >…</tc-callout>

Accessibility

Renders an <aside> element with role="note" for non-danger variants and role="alert" for danger.
The icon is aria-hidden — the surrounding text carries the meaning.
For real-time error announcements (like form errors that appear after submission), prefer role="alert" via variant="danger" so screen readers interrupt to announce.

← All components