Callout

Callout combines a title, optional description, icon, and action. Choose info, warning, error, neutral, or success to match the message.

import { Callout } from 'twenty-ui/components';

export const ImportNotice = ({ onReview }: { onReview: () => void }) => (
  <Callout
    variant="warning"
    title="Some records need attention"
    description="Review the missing email addresses before importing."
    action={{ label: 'Review records', onClick: onReview }}
    isClosable
  />
);

Closing a closable callout updates its internal visibility and calls onClose. Remount it to show it again. fullWidth fills its container. Use Icon to replace the default help icon. The component does not add live-region semantics or forward native attributes. Put it in a separately labeled or announced region when that is needed.

Props

{ label: string; onClick: () => void; }

Optional footer action with a label and onClick callback.

string

Optional supporting text. Empty strings are hidden.

boolean

default:"false"

Fills the available container width.

IconComponent

Leading icon component. Defaults to the help icon.

boolean

default:"false"

Shows a close button that hides the callout until it is remounted.

(() => void)

Called after the close button hides the callout.

string

required

Main message displayed beside the icon.

"error" | "info" | "neutral" | "success" | "warning"

required

Semantic appearance: info, warning, error, neutral, or success.

Overview

Apps

API

Self-Host

Contribute

UI Library

Props

​Props

Props