> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Callout
> Feedback with node content, actions, and caller-owned dismissal.
export const StoryEmbed = ({storyId, title, height = 120}) => <>
Open in Storybook
;
`Callout` combines title, description, icon, and action nodes. Use `status` for `neutral`, `info`, `success`, `warning`, or `error`. It defaults to `info` and supports the `soft` appearance. The status selects a gray, blue, green, orange, or red palette; `color` overrides that palette without changing the meaning.
## Usage
```tsx theme={null}
import { Callout } from 'twenty-ui/components/feedback';
export const WorkflowNotice = () => (
Learn more}
/>
);
```
## Visual options
Compare semantic statuses using the same content. Choose a status for the message meaning, and override color only when the surrounding design requires it.
## Dismissible notice
```tsx theme={null}
import { useState } from 'react';
import { Callout } from 'twenty-ui/components/feedback';
import { IconAlertTriangle } from 'twenty-ui/icon';
import { Button } from 'twenty-ui/primitives/input';
export const ImportNotice = ({ onReview }: { onReview: () => void }) => {
const [isVisible, setIsVisible] = useState(true);
return (
<>
{isVisible && (
}
action={
Review records
}
onDismiss={() => setIsVisible(false)}
closeLabel="Dismiss import notice"
/>
)}
);
};
```
## Dismissal and labels
Passing `onDismiss` exposes an accessible close button. Each pointer or keyboard activation calls it once. The callout remains rendered until its caller hides it. Omit `onDismiss` for a persistent message. `closeLabel` defaults to `Close`.
Your application owns the content, actions, accessible names, and translations. Use `Callout.Action` for a small ghost button with regular font weight. It accepts Button props, including link attributes, disabled state, refs, and custom rendering; size and appearance are fixed. The action slot also accepts custom buttons, links, disabled controls, or multiple nodes. The default help icon is decorative; pass `icon={null}` to omit it or supply a node with appropriate accessible semantics. Twenty UI does not require an i18n provider.
## Native integration
Native attributes, `className`, `style`, and `ref` target the root `div`. Use `render` to compose a different root element or a callback receiving the root props and `{ status, variant, color }`. `title` and `description` are content slots. `fullWidth` removes the default 512px maximum width.
The component adds no live-region role or announcements. Supply native `role`, `aria-live`, and other accessible attributes when the surrounding workflow requires them.
## Migration
Replace the previous semantic `variant` with `status`, and constructor `Icon` with an `icon` node. Replace `{ label, onClick }` action objects with `Callout.Action` or custom controls. Replace `isClosable` and `onClose` with `onDismiss`, and conditionally render the callout in the caller when dismissal should hide it. Existing translated content and action labels stay in the application.
## Props
Optional footer node. Use Callout.Action for the standard action or supply custom controls.
Additional class names merged onto the root.
Accessible name of the dismiss button. Defaults to `Close`.
Palette override: gray, blue, green, orange, or red. Defaults to the status palette.
Optional supporting content node. Empty slots are hidden.
Removes the default 512px maximum width.
Leading icon node. Defaults to a decorative help icon. Pass null to omit it.
Shows a dismiss button and notifies the caller once per activation. The caller owns visibility.
Ref to the root div, or the element supplied through render.
Element or callback composition for the root. Receives status, variant, and color state.
Feedback meaning: neutral, info, success, warning, or error. Defaults to info.
Inline styles forwarded to the root.
Main message node displayed beside the icon.
Supported appearance: soft.
### Callout.Action
CSS class applied to the element, or a function that
returns a class based on the component's state.
Semantic color of the button.
Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.
Decorative content displayed after the label.
Whether the button should be focusable when disabled.
Expands the button to fill its container width.
Destination URL. Renders a native anchor when `render` is omitted unless `nativeButton` is explicitly true. Custom renderers retain their own element contract.
Shows a loading indicator and disables activation.
Where the loading indicator appears. `center` hides the content while preserving its layout space; `start` and `end` keep children and the opposite icon visible and replace the corresponding icon with the spinner.
Whether the rendered root is a native button. Defaults to true for custom renderers. The built-in `href` anchor defaults to false; an explicit value takes precedence.
Caller-supplied root element or renderer. Native attributes, handlers, event details, and refs reach the rendered root. Use `nativeButton={false}` and `role="link"` for a custom navigation anchor. Router integration belongs to the caller.
Role of the root element. Use `link` for custom navigation renderers.
Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.
Localized text between sequence steps. Defaults to then.
Decorative content displayed before the label.
Style applied to the element, or a function that
returns a style object based on the component's state.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.