A short message to attract user's attention.
<Callout.Root>
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need admin privileges to install and access this application.
</Callout.Text>
</Callout.Root>
Groups Icon and Text parts. This component is based on the div
element and supports common margin props.
Provides width and height for the icon associated with the callout. This component is based on the div
element.
Renders the callout text. This component is based on the p
element.
Use the size
prop to control the size.
<Flex direction="column" gap="3" align="start">
<Callout.Root size="3">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need admin privileges to install and access this application.
</Callout.Text>
</Callout.Root>
<Callout.Root size="2">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need admin privileges to install and access this application.
</Callout.Text>
</Callout.Root>
<Callout.Root size="1">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need admin privileges to install and access this application.
</Callout.Text>
</Callout.Root>
</Flex>
Use the variant
prop to control the visual style.
<Flex direction="column" gap="3">
<Callout.Root variant="soft">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
<Callout.Root variant="surface">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
<Callout.Root variant="outline">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
</Flex>
Use the color
prop to assign a specific color, ignoring the global theme.
<Flex direction="column" gap="3">
<Callout.Root color="blue">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
<Callout.Root color="green">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
<Callout.Root color="red">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
</Flex>
Use the HighContrast
prop to add additional contrast.
<Flex direction="column" gap="3">
<Callout.Root variant="soft">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
An update to Radix Themes is available. See what’s new in version 3.2.0.
</Callout.Text>
</Callout.Root>
<Callout.Root variant="soft" highContrast>
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
An update to Radix Themes is available. See what’s new in version 3.2.0.
</Callout.Text>
</Callout.Root>
</Flex>
Add a native WAI-ARIA alert
role to the callout when the user’s immediate attention is required, like when an error message appears. The screen reader will be interrupted, announcing the new content immediately.
<Callout.Root color="red" role="alert">
<Callout.Icon>
<ExclamationTriangleIcon />
</Callout.Icon>
<Callout.Text>
Access denied. Please contact the network administrator to view this page.
</Callout.Text>
</Callout.Root>