Callout

Callout Props

Prop	Type	Default
`type`	`"grey" \| "success" \| "alert" \| "gradient" \| "accent" \| "attention" \| "normal"`	`"grey"`
`outline`	`boolean`	`false`
`highContrast`	`boolean`	`false`
`action`	`ReactNode`	-
`dismissible`	`boolean`	`false`
`icon`	`ReactNode`	`InfoCircledIcon`
`onDismiss`	`() => void`	-
`children`	`ReactNode`	-
`width`	`string \| number`	-
`className`	`string`	-

Examples

Type

The Callout component offers different type options. You can customize the visual style using the type prop:

<Flex gap="medium" direction="column">
  <Callout type="grey">Default Callout</Callout>
  <Callout type="success">Success Callout</Callout>
  <Callout type="alert">Alert Callout</Callout>
  <Callout type="gradient">Gradient Callout</Callout>
  <Callout type="accent">Accent Callout</Callout>
  <Callout type="attention">Attention Callout</Callout>
  <Callout type="normal">Normal Callout</Callout>
</Flex>

Outline

The Callout component can be rendered with or without an outline border:

<Flex gap="medium" direction="column">
  <Callout type="success">Without Outline Callout</Callout>
  <Callout type="success" outline>
    With Outline Callout
  </Callout>
</Flex>

High Contrast

The Callout component supports high contrast mode for better visibility:

<Flex gap="medium" direction="column">
  <Callout type="alert">Normal Callout</Callout>
  <Callout type="alert" highContrast>
    High Contrast Callout
  </Callout>
</Flex>

Dismissible

The Callout component can be made dismissible:

<Callout dismissible onDismiss={() => alert("Dismissed!")}>
  Dismissible Callout
</Callout>

With Action

The Callout component can include an action button:

<Callout type="success" action={<Button>Action</Button>}>
  A short message to attract user's attention
</Callout>

Custom Width

The Callout component supports custom width:

<Callout type="success" width={500}>
  A short message to attract user's attention
</Callout>

Accessibility

The Callout component includes appropriate ARIA attributes for accessibility:

Uses semantic HTML elements for proper structure
Dismiss button includes aria-label for screen readers
Interactive elements are keyboard accessible

Callout

On this page