Обзор
Callout объединяет узлы заголовка, описания, значка и действия. Используйте status со значениями neutral, info, success, warning или error. По умолчанию используется info; также поддерживается оформление soft. Статус выбирает серую, синюю, зелёную, оранжевую или красную палитру; color переопределяет эту палитру, не изменяя значение.
Использование
Визуальные параметры
Сравните семантические статусы, используя одинаковый контент. Выберите статус в соответствии со смыслом сообщения и изменяйте цвет, только если этого требует окружающий дизайн.Закрываемое уведомление
Закрытие и подписи
ПередачаonDismiss предоставляет доступную кнопку закрытия. Каждая активация указателем или клавиатурой вызывает её один раз. Выноска остаётся отрисованной, пока вызывающий код не скроет её. Не указывайте onDismiss для постоянного сообщения. По умолчанию для closeLabel используется Close.
Ваше приложение отвечает за содержимое, действия, доступные имена и переводы. Используйте Callout.Action для небольшой кнопки-призрака с обычной насыщенностью шрифта. Он принимает свойства Button, включая атрибуты ссылок, состояние отключения, refs и пользовательскую отрисовку; размер и внешний вид фиксированы. Слот действия также принимает пользовательские кнопки, ссылки, отключённые элементы управления или несколько узлов. Значок справки по умолчанию является декоративным; передайте icon={null}, чтобы не отображать его, или укажите узел с подходящей доступной семантикой. Twenty не требует провайдера i18n.
Нативная интеграция
Нативные атрибуты,className, style и ref применяются к корневому div. Используйте render, чтобы скомпоновать другой корневой элемент или функцию обратного вызова, получающую свойства корневого элемента и { status, variant, color }. title и description — это слоты содержимого. fullWidth удаляет максимальную ширину по умолчанию в 512px.
Компонент не добавляет роль живого региона и не делает объявлений. Указывайте нативные role, aria-live и другие доступные атрибуты, когда этого требует окружающий рабочий процесс.
Миграция
Замените предыдущий семантическийvariant на status, а конструктор Icon — на узел icon. Замените объекты действий { label, onClick } на Callout.Action или пользовательские элементы управления. Замените isClosable и onClose на onDismiss и условно отрисовывайте выноску в вызывающем коде, когда её следует скрывать при закрытии. Существующие переведённые содержимое и подписи действий остаются в приложении.
Свойства
ReactNode
Optional footer node. Use Callout.Action for the standard action or supply custom controls.
string
Additional class names merged onto the root.
string
по умолчанию:"Close"
Accessible name of the dismiss button. Defaults to
Close."blue" | "gray" | "green" | "orange" | "red"
по умолчанию:"status palette"
Palette override: gray, blue, green, orange, or red. Defaults to the status palette.
ReactNode
Optional supporting content node. Empty slots are hidden.
boolean
по умолчанию:"false"
Removes the default 512px maximum width.
ReactNode
по умолчанию:"decorative help icon"
Leading icon node. Defaults to a decorative help icon. Pass null to omit it.
(() => void)
Shows a dismiss button and notifies the caller once per activation. The caller owns visibility.
Ref<HTMLDivElement>
Ref to the root div, or the element supplied through render.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, CalloutState>
Element or callback composition for the root. Receives status, variant, and color state.
"error" | "info" | "neutral" | "success" | "warning"
по умолчанию:"info"
Feedback meaning: neutral, info, success, warning, or error. Defaults to info.
CSSProperties
Inline styles forwarded to the root.
ReactNode
обязательно
Main message node displayed beside the icon.
"soft"
по умолчанию:"soft"
Supported appearance: soft.
Callout.Action
string | ((state: ButtonState) => string | undefined)
CSS class applied to the element, or a function that
returns a class based on the component’s state.
"accent" | "danger" | "inherit" | "neutral" | "success"
Semantic color of the button.
inherit uses the surrounding text color for the label, icons, loader, and outline border, with translucent black interaction surfaces. It supports outline, ghost, soft, and link. Resolving solid with inherit throws, including appearance inherited from ButtonGroup and wrapper defaults.boolean
Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.
ReactNode
Decorative content displayed after the label.
boolean
по умолчанию:"false"
Whether the button should be focusable when disabled.
boolean
Expands the button to fill its container width.
string
Destination URL. Renders a native anchor when
render is omitted unless nativeButton is explicitly true. Custom renderers retain their own element contract.boolean
Shows a loading indicator and disables activation.
"center" | "end" | "start"
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.boolean
по умолчанию:"true"
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.ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>
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.AriaRole
Role of the root element. Use
link for custom navigation renderers.ShortcutDefinition
Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.
string
Localized text between sequence steps. Defaults to then.
ReactNode
Decorative content displayed before the label.
CSSProperties | ((state: ButtonState) => CSSProperties | undefined)
Style applied to the element, or a function that
returns a style object based on the component’s state.