Callout

Compact, visual element designed to draw attention to important information.

Report Issue Github

Usage

Basic Callout

Render a Callout


<Callout variant="ghost" color="orange" iconPrepend={<Icon type="AlertCircle" />} highContrast>
  You will need admin authorization access this section.
</Callout>

Variants

Change the visual appearance using the variant prop.


<Flex direction="column" width="100%">
  <Callout highContrast variant="solid" iconPrepend={<Icon type="AlertCircle" />}>
    You will need admin authorization access this section.
  </Callout>
  <Callout variant="ghost" iconPrepend={<Icon type="AlertCircle" />}>
    You will need admin authorization access this section.
  </Callout>
  <Callout variant="outlined" iconPrepend={<Icon type="AlertCircle" />}>
    You will need admin authorization access this section.
  </Callout>
  <Callout variant="translucent" iconPrepend={<Icon type="AlertCircle" />}>
    You will need admin authorization access this section.
  </Callout>
</Flex>

Color, Radius & High Contrast

Customize the callout's appearance using color, radius, and highContrast props.


<Callout color="red" radius="full" highContrast iconPrepend={<Icon type="AlertCircle" />}>
  You will need admin authorization access this section.
</Callout>

API

Props

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`label`	`string \| number`	-	Yes
`variant`	`'solid' \| 'ghost' \| 'outlined'`	`'solid'`	-
`MarginProps`	`Token<MarginProps>`	-	-
`color`	`ThemeAccentColor`	-	-
`radius`	`ThemeRadius`	-	-
`size`	`Responsive<Size>`	`'medium'`	-
`highContrast`	`boolean`	-	-

Tree

Drawer