# Callout
> Cherry Callout component - tinted admonition boxes with five semantic intents and automatic icons.
Source: https://cherry.al/code/callout
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# Callout
The Callout component highlights a passage of content in a tinted, bordered box with a leading icon. Five semantic intents cover the usual admonitions: `note`, `info`, `warning`, `danger`, and `success`. Without a `$type` it renders as a neutral card on the theme's surface colors, with no tint and no icon.
```jsx
import React from "react";
import { Callout } from "cherry-styled-components";
export default function Page() {
return (
Changing this setting logs out every active session.
);
}
```
Each intent brings its own icon: `CircleAlert` for note, `Info` for info, `TriangleAlert` for warning, `OctagonAlert` for danger, and `Check` for success.
## Properties
The semantic intent, controlling tint and default icon. Omit it for a neutral, untinted card.
Lucide icon name that overrides the intent's default icon, or supplies one for an untyped callout.
Renders the callout without an icon.
The component also accepts all native `
` attributes and forwards its ref to the root element. The library exports the `CalloutType` type.
The tints are alert-semantic and deliberately independent of the brand palette: a white-labeled theme can recolor everything else without a danger callout turning reassuring. Each intent carries a light and a dark tint, and the dark one applies both when the theme object is dark and under a `dark` class on ``, so it is correct even before hydration swaps the theme.