Anatomy

<Callout.Root>
  <Callout.Title />
</Callout.Root>

Usage

import { Callout } from '@ivaldi/ui'

<Callout.Root color="primary">
  <InfoIcon />
  <Callout.Title>
    This is an informational message.
  </Callout.Title>
</Callout.Root>

<Callout.Root color="warning">
  <AlertTriangleIcon />
  <Callout.Title>
    Please be careful with this action.
  </Callout.Title>
</Callout.Root>

Callout.Root Props

Root component for the Callout alert system Renders a styled div with alert role and configurable color variants

Callout.Description Props

Description component for the Callout Renders the content area with custom text styling

Callout.Title Props

Title component for the Callout Renders a heading using the base Typography Title component with h5 size