> ## 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.

# Баннер

> Содержимое обратной связи с независимыми статусом, внешним видом и палитрой.

## Обзор

`Banner` размещает содержимое, переданное вызывающей стороной, необязательный узел `icon` и необязательный узел `action`. `status` описывает значение обратной связи: `neutral`, `info`, `success`, `warning` или `error`. `variant` выбирает внешний вид `solid` или `soft`. Явно заданный `color` переопределяет палитру статуса, не меняя его значения.

По умолчанию используются `status="info"` и `variant="solid"`. Палитры статусов по умолчанию: серая, синяя, зелёная, оранжевая и красная соответственно.

**Light**

[Пример баннера (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-banner--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример баннера (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-banner--display\&viewMode=story\&globals=colorScheme:dark)

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

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

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

export const SyncBanner = () => (
  <Banner status="info" variant="solid">
    Contact sync is temporarily paused. Your saved records remain available.
  </Banner>
);
```

## Действия и внешний вид

**Light**

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

**Dark**

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

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

```tsx theme={null}
import { Banner } from 'twenty-ui/primitives/feedback';
import { IconInfoCircle } from 'twenty-ui/icon';

export const SyncBanner = ({ onRetry }: { onRetry: () => void }) => (
  <Banner
    status="error"
    variant="soft"
    color="blue"
    icon={<IconInfoCircle aria-hidden="true" />}
    action={<Banner.Action onClick={onRetry}>Retry sync</Banner.Action>}
  >
    Contact sync could not finish.
  </Banner>
);
```

`Banner.Action` предоставляет небольшую контурную кнопку, которая наследует отображаемый цвет баннера, включая явные переопределения палитры и варианты `solid`. Поддерживаются взаимодействия Button, ссылки, refs и пользовательский рендеринг. Слот `action` также принимает произвольные элементы управления.

Целевой корневой элемент — `div`. Нативные атрибуты, обработчики событий, `className`, `style` и `ref` применяются к этому корневому элементу. `render` принимает элемент Base UI или функцию обратного вызова; функция обратного вызова получает нативные props и ref, а также определённое состояние `status`, `variant` и `color`. Сохраняйте переданные props и ref при компоновке другого элемента.

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

export const SyncResult = () => (
  <Banner
    status="success"
    variant="soft"
    role="status"
    aria-live="polite"
    aria-atomic="true"
    render={<section aria-label="Sync result" />}
  >
    Contacts are up to date.
  </Banner>
);
```

Статус не назначает автоматически `role`, `aria-live` или объявления. Выбирайте их на стороне вызывающего кода, когда обновления должны объявляться. Указывайте доступные имена для элементов управления и помечайте декоративные узлы значков с помощью `aria-hidden`. Вызывающая сторона управляет видимостью и закрытием.

## Закрытие

Передайте `onDismiss`, чтобы показать прозрачную кнопку закрытия размером 24 px в логическом конце строки. Элемент управления наследует цвет баннера и имеет `type="button"`. `closeLabel` по умолчанию имеет значение `Close`; укажите локализованный текст в вашем приложении. Сбалансированные интервалы по горизонтали не дают центрированному содержимому и действиям перекрывать элемент управления.

Вызывающая сторона управляет видимостью. При активации элемента управления закрытием вызывается `onDismiss`, а баннер остаётся смонтированным, пока вызывающая сторона не обновит состояние. Другие действия остаются в слоте `action`.

```tsx theme={null}
import { useState } from 'react';
import { Banner } from 'twenty-ui/primitives/feedback';

export const DismissibleSyncBanner = () => {
  const [isVisible, setIsVisible] = useState(true);

  return isVisible ? (
    <Banner
      onDismiss={() => setIsVisible(false)}
      closeLabel="Dismiss sync message"
    >
      Contacts are syncing in the background.
    </Banner>
  ) : null;
};
```

**Light**

[Закрываемый баннер (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-banner--dismissible\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Закрываемый баннер (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-banner--dismissible\&viewMode=story\&globals=colorScheme:dark)

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

## Миграция

Замените `variant="primary"` на `variant="solid"`, а `variant="secondary"` — на `variant="soft"`. Замените `color="danger"` на `status="error"` или на `color="red"`, если нужно изменить только палитру. Для синих информационных баннеров можно использовать `status="info"`.

## Свойства

**action** `ReactNode`

Optional trailing ReactNode. Banner.Action supplies a small outline action that inherits the resolved banner color; arbitrary controls are also accepted.

**children** `ReactNode`

Caller-provided content, including text, links and controls.

**className** `string`

Class merged onto the root div or composed element.

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

Accessible label for the close control. Defaults to Close; supply localized text when needed.

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

Palette override: gray, blue, green, orange or red. When omitted, status selects the corresponding palette.

**icon** `ReactNode`

Optional leading ReactNode. The caller supplies decorative or accessible icon semantics.

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

Renders a 24px ghost close control and calls this callback when activated. The caller owns visibility.

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

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

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

Base UI element or render callback. The callback receives native props/ref and resolved status, variant and color state.

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

Feedback meaning: neutral, info, success, warning or error. Defaults to info. Does not assign a role or live region.

**style** `CSSProperties`

Inline styles applied to the root div or composed element.

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

Solid or soft appearance. Defaults to solid, independently of status.

### Banner.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.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.