$ rezi
Widgets

Callout

Highlighted message box for important information.

Highlighted message box for important information.

Usage

ui.callout("Connection restored", {
  variant: "success",
  title: "Online",
})

Props

PropTypeDefaultDescription
messagestringrequiredCallout text
variant"info" | "success" | "warning" | "error""info"Visual variant
titlestring-Optional title line
iconstring-Optional icon override
styleTextStyle-Optional style override

Design System Styling

Callouts are design-system styled by default when the active theme provides semantic color tokens. The variant maps to the callout recipe tone.

Manual style overrides are merged on top of the recipe result (they do not disable recipes).

If the active theme does not provide semantic color tokens, callouts fall back to non-recipe rendering.

On this page