Callout

The Callout component displays information in a colorful box. Callouts are used to draw user attention to important information.

Basic usage

tsx
Copied
1
<Callout title="This is a callout">
2
Callouts are used to draw attention to important information.
3
</Callout>

Variants

Callouts come in variants that determine the Callout's appearances.
tsx
Copied
1
<Callout title="Info" variant="info">
2
Info draws attention to important information.
3
</Callout>
4
<Callout title="Success" variant="success">
5
Success draws attention to successful actions.
6
</Callout>
7
<Callout title="Warning" variant="warning">
8
Warning draws attention to disclaimers or potential issues.
9
</Callout>
10
<Callout title="Error" variant="error">
11
Error draws attention to errors or issues.
12
</Callout>
13
<Callout title="Neutral" variant="neutral">
14
Neutral draws attention to information but in a less flashy manner.
15
</Callout>

Icons

Callouts display an icon to the left of the title. All variants except for neutral set an icon by default. You can override the icon by passing an icon prop. You can also pass null to hide the icon.
tsx
Copied
1
<Callout title="Airplane icon" icon={<PaperAirplaneIcon />}>
2
This callout has an Airplane icon.
3
</Callout>
4
<Callout title="No icon" icon={null}>
5
This callout has no icon.
6
</Callout>

Component API

children
optional
React.ReactNode

Callout description.

grow
optional
boolean

If true, the element will grow to fill available space.

This prop works only if the element is a direct child of a Stack.

height
optional
default: auto
SizingToken | "{number}px"
Defines the height of the component. See SizingToken docs for more details.
icon
optional
React.ReactNode | null

Specify a custom icon or null to hide the icon.

title
optional
React.ReactNode

Callout title.

variant
optional
default: info
"success" | "error" | "info" | "warning" | "neutral"

Callout appearance.

width
optional
default: auto
SizingToken | "{number}px"
Defines the width of the component. See SizingToken docs for more details.