Callout

Highlight persistent information, status, warnings, and errors within a page.
alphaView sourceRadix Themes
Data availability
Your report includes data through September 10.
vue
<script setup lang="ts">
import { Callout } from '@typlog/ui'
</script>

<template>
  <Callout
    color="blue"
    icon="lucide:info"
    title="Data availability"
  >
    Your report includes data through September 10.
  </Callout>
</template>

Callout provides visual presentation without assigning a live-region role. Use role="status" for a message that should be announced politely and role="alert" only when an urgent update requires immediate attention. The icon prop accepts an Iconify name and is decorative; include the complete message in the default slot. Use the icon and title slots when their props are not flexible enough. Following Radix Themes, the supported visual variants are soft, surface, and outline; solid is intentionally not available.

API Reference ​

Callout ​

PropDefaultType
as"div"
AsTagComponent

The element or component this component should render as.

color
–
Color

Overrides the accent color inherited from the theme.

highContrast
–
boolean

Uses a higher contrast text color.

icon
–
string

Iconify icon rendered before the content.

size"2"
"1""2""3"

Controls the spacing and typography of the callout.

title
–
string

Optional heading rendered above the message.

variant"soft"
"outline""soft""surface"

The visual treatment of the callout.

Examples ​

Variants ​

Soft callouts work well for supporting information.
Surface callouts add definition against similar backgrounds.
Outline callouts keep the surrounding surface visible.
vue
<script setup lang="ts">
import { Callout } from '@typlog/ui'
</script>

<template>
  <div class="grid gap-3">
    <Callout color="blue" icon="lucide:info" variant="soft">
      Soft callouts work well for supporting information.
    </Callout>
    <Callout color="green" icon="lucide:circle-check" variant="surface">
      Surface callouts add definition against similar backgrounds.
    </Callout>
    <Callout color="amber" icon="lucide:triangle-alert" variant="outline" high-contrast>
      Outline callouts keep the surrounding surface visible.
    </Callout>
  </div>
</template>
Last updated Sep 15, 2026
CardTable