> ## 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` объединяет узлы заголовка, описания, значка и действия. Используйте `status` со значениями `neutral`, `info`, `success`, `warning` или `error`. По умолчанию используется `info`; также поддерживается оформление `soft`. Статус выбирает серую, синюю, зелёную, оранжевую или красную палитру; `color` переопределяет эту палитру, не изменяя значение.

**Light**

[Пример выноски (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-callout--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример выноски (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-callout--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-feedback-callout--display)

## Использование

```tsx theme={null}
import { Callout } from 'twenty-ui/components/feedback';

export const WorkflowNotice = () => (
  <Callout
    status="neutral"
    title="This form will appear in workflow runs."
    description="Because this workflow is not using a manual trigger, the form will not open on top of the interface. To fill it, open the corresponding workflow run and complete the form there."
    action={<Callout.Action>Learn more</Callout.Action>}
  />
);
```

## Визуальные параметры

Сравните семантические статусы, используя одинаковый контент. Выберите статус в соответствии со смыслом сообщения и изменяйте цвет, только если этого требует окружающий дизайн.

**Light**

[Статусы обратной связи выноски (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-callout--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Статусы обратной связи выноски (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-callout--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-feedback-callout--catalog)

## Закрываемое уведомление

```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 && (
        <Callout
          status="warning"
          title="Some records need attention"
          description="Review the missing email addresses before importing."
          icon={<IconAlertTriangle size={16} aria-hidden="true" />}
          action={
            <Callout.Action onClick={onReview}>Review records</Callout.Action>
          }
          onDismiss={() => setIsVisible(false)}
          closeLabel="Dismiss import notice"
        />
      )}
      <Button onClick={() => setIsVisible(true)}>Show notice</Button>
    </>
  );
};
```

## Закрытие и подписи

Передача `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` и условно отрисовывайте выноску в вызывающем коде, когда её следует скрывать при закрытии. Существующие переведённые содержимое и подписи действий остаются в приложении.

## Свойства

**action** `ReactNode`

Optional footer node. Use Callout.Action for the standard action or supply custom controls.

**className** `string`

Additional class names merged onto the root.

**closeLabel** `string` (default: Close)

Accessible name of the dismiss button. Defaults to `Close`.

**color** `"blue" | "gray" | "green" | "orange" | "red"` (default: status palette)

Palette override: gray, blue, green, orange, or red. Defaults to the status palette.

**description** `ReactNode`

Optional supporting content node. Empty slots are hidden.

**fullWidth** `boolean` (default: false)

Removes the default 512px maximum width.

**icon** `ReactNode` (default: decorative help icon)

Leading icon node. Defaults to a decorative help icon. Pass null to omit it.

**onDismiss** `(() =\> void)`

Shows a dismiss button and notifies the caller once per activation. The caller owns visibility.

**ref** `Ref\<HTMLDivElement\>`

Ref to the root div, or the element supplied through render.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, CalloutState\>`

Element or callback composition for the root. Receives status, variant, and color state.

**status** `"error" | "info" | "neutral" | "success" | "warning"` (default: info)

Feedback meaning: neutral, info, success, warning, or error. Defaults to info.

**style** `CSSProperties`

Inline styles forwarded to the root.

**title** `ReactNode` *required*

Main message node displayed beside the icon.

**variant** `"soft"` (default: soft)

Supported appearance: soft.

### Callout.Action

**Action.className** `string | ((state: ButtonState) =\> string | undefined)`

CSS class applied to the element, or a function that
returns a class based on the component's state.

**Action.color** `"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.

**Action.elevated** `boolean`

Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.

**Action.endIcon** `ReactNode`

Decorative content displayed after the label.

**Action.focusableWhenDisabled** `boolean` (default: false)

Whether the button should be focusable when disabled.

**Action.fullWidth** `boolean`

Expands the button to fill its container width.

**Action.href** `string`

Destination URL. Renders a native anchor when `render` is omitted unless `nativeButton` is explicitly true. Custom renderers retain their own element contract.

**Action.loading** `boolean`

Shows a loading indicator and disables activation.

**Action.loadingPosition** `"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.

**Action.nativeButton** `boolean` (default: 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.

**Action.render** `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.

**Action.role** `AriaRole`

Role of the root element. Use `link` for custom navigation renderers.

**Action.shortcut** `ShortcutDefinition`

Flat key array for simultaneous keys, or nested key arrays for an ordered sequence. Displayed on non-mobile screens.

**Action.shortcutJoinLabel** `string`

Localized text between sequence steps. Defaults to then.

**Action.startIcon** `ReactNode`

Decorative content displayed before the label.

**Action.style** `CSSProperties | ((state: ButtonState) =\> CSSProperties | undefined)`

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.