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

# Встроенный баннер

> Встроенная обратная связь с содержимым узла, значками и действиями.

## Обзор

`InlineBanner` объединяет [Баннер](https://docs.twenty.com/ru/ui/primitives/feedback/banner.md) со скруглённой встроенной компоновкой и декоративным значком информации. Он использует независимые контракты Banner для `status`, `variant`, `color`, `icon` и `action`. Его внешний вид по умолчанию — `soft`, а статус по умолчанию — `info`.

**Light**

[Встроенный баннер с действием (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-inlinebanner--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Встроенный баннер с действием (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-inlinebanner--display\&viewMode=story\&globals=colorScheme:dark)

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

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

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

export const ModelsBanner = ({ onConfigure }: { onConfigure: () => void }) => (
  <InlineBanner
    status="error"
    action={
      <InlineBanner.Action onClick={onConfigure}>
        Configure models
      </InlineBanner.Action>
    }
  >
    No AI models are enabled.
  </InlineBanner>
);
```

Компоновка `standard` заполняет доступную ширину. Дочерние элементы в виде простых строк усекаются; при фокусе с клавиатуры, наведении указателя или касании полная строка отображается во всплывающей подсказке. Дочерние элементы в виде расширенных узлов отображаются напрямую, поэтому встроенные ссылки и элементы управления сохраняют собственную семантику. Если расширенный контент нужно усечь, задайте явные параметры типографики.

Используйте `layout="compact"` для переноса контента, более плотных интервалов и максимальной ширины контента 512px. Добавьте `fullWidth`, чтобы снять это ограничение и заполнить доступную ширину родительского элемента, включая отступы и границы. По умолчанию установлено значение `false`, и это не изменяет стандартную компоновку, которая уже заполняет родительский элемент. У него нет нижнего внешнего отступа. Макет не зависит от оформления `solid` или `soft`. `embedded` удаляет нижний внешний отступ стандартного макета.

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

export const ConnectionBanner = () => (
  <InlineBanner
    layout="compact"
    status="warning"
    color="blue"
    icon={<IconInfoCircle aria-hidden="true" />}
    action={
      <InlineBanner.Action href="/settings/accounts">
        Connection settings
      </InlineBanner.Action>
    }
  >
    Connect your account to sync contacts.
  </InlineBanner>
);
```

**Light**

[Компактный баннер со ссылкой назначения (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-inlinebanner--compact-link\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Компактный баннер со ссылкой назначения (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-inlinebanner--compact-link\&viewMode=story\&globals=colorScheme:dark)

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

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

Корневой целевой элемент — `div`. Нативные props, `className`, `style` и `ref` применяются к этому корневому элементу; Base UI `render` может скомпоновать другой элемент и получает разрешённое состояние Banner. `action` принимает любой ReactNode, включая несколько элементов управления с их полными API Button или ссылок. `icon={null}` удаляет значок по умолчанию.

Вызывающая сторона определяет, отображается ли баннер и следует ли объявлять об изменениях. При необходимости укажите `role="status"` и `aria-live="polite"` либо подходящую обёртку для динамической области. Status не назначает семантику динамической области. Задавайте имена элементам управления действиями и отмечайте декоративные пользовательские значки с помощью `aria-hidden`.

## Миграция

Замените `message` на `children`, `LeftIcon={Icon}` на `icon={<Icon />}`, а конфигурацию `button` — на узел `action`. Используйте `InlineBanner.Action`, чтобы стилизация действия соответствовала баннеру. Замените `variant="compact"` на `layout="compact"`; стандартный макет теперь используется по умолчанию. Используйте `status="error"` для обозначения ошибки или `color="red"` для переопределения палитры.

## Свойства

**action** `ReactNode`

Optional trailing ReactNode. InlineBanner.Action supplies the shared banner action preset and inherits the resolved banner color; arbitrary controls are also accepted.

**children** `ReactNode`

Caller-provided content. Standard plain strings truncate with a focusable tooltip; rich nodes render directly. Compact content wraps.

**className** `string`

Class merged onto the root div or composed element.

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

Gray, blue, green, orange or red palette override. An omitted color follows status.

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

Removes the standard bottom margin. Compact layouts have no bottom margin.

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

Fills the available parent width, including padding and borders, and removes the compact layout's 512px maximum. Defaults to false; standard layout already fills its parent.

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

Leading ReactNode. Defaults to a decorative information icon. Pass null to omit it.

**layout** `"compact" | "standard"` (default: standard)

Standard full-width layout or compact wrapping layout with a 512px maximum content width. Defaults to standard.

**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 root element or render callback, receiving native props/ref and resolved Banner state.

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

Feedback meaning: neutral, info, success, warning or error. Defaults to info. Roles and announcements remain caller-owned.

**style** `CSSProperties`

Inline styles applied to the root div or composed element.

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

Solid or soft appearance, independently of status and layout. Defaults to soft.

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