Component

Callout

A bordered message block for surfacing contextual information, tips, and warnings. Uses the headless @refraction-ui/callout core.

Variants

Five tones for different intents. The destructive variant is announced as an alert.

A neutral note to draw attention to supporting information.

Heads up — this feature is in beta and behavior may change.

Your changes were saved successfully.

This action will overwrite your existing configuration.

Deleting this project is permanent and cannot be undone.

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import {
  Callout,
  CalloutIcon,
  CalloutContent,
  CalloutTitle,
  CalloutDescription,
} from '@refraction-ui/react'

export function MyComponent() {
  return (
    <Callout variant="info" className="flex gap-3 rounded-lg border p-4">
      <CalloutIcon>{/* your icon */}</CalloutIcon>
      <CalloutContent>
        <CalloutTitle>Scheduled maintenance</CalloutTitle>
        <CalloutDescription>
          The dashboard will be briefly unavailable on Sunday.
        </CalloutDescription>
      </CalloutContent>
    </Callout>
  )
}

// Render as your own element: <Callout asChild><section>…</section></Callout>

Composition

Compose an icon, title, and description with the provided sub-components for a richer layout.

Scheduled maintenance

The dashboard will be unavailable on Sunday from 02:00 to 04:00 UTC while we upgrade our infrastructure.

Props

Prop	Type	Default	Description
`variant`	`'default' \| 'destructive' \| 'success' \| 'warning' \| 'info'`	`'default'`	Visual tone of the callout. `destructive` also sets `role="alert"` for assistive tech; the others get no landmark role unless you name the callout with `aria-label`/`aria-labelledby` (then `role="region"`). An explicit `role` always wins.
`className`	`string`	--	Additional CSS classes to apply to the root element.
`asChild`	`boolean`	`false`	Render as child element (e.g. wrap a <section> tag).

Sub-components — each forwards all native props of the element noted below.

Prop	Type	Default	Description
`CalloutIcon`	`div`	--	Wrapper for a leading icon. Adds flex-shrink and top alignment.
`CalloutContent`	`div`	--	Flex-1 wrapper grouping the title and description beside the icon.
`CalloutTitle`	`h5`	--	Styled heading for the callout.
`CalloutDescription`	`div`	--	Styled body text for the callout.