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

> ملاحظات مضمنة مع محتوى العقدة والأيقونات والإجراءات.

## نظرة عامة

يجمع `InlineBanner` بين [اللافتة](https://docs.twenty.com/ar/ui/primitives/feedback/banner.md) وتخطيط مضمن بحواف مستديرة وأيقونة معلومات زخرفية. يتشارك عقود `status` و`variant` و`color` و`icon` و`action` المستقلة الخاصة بـ Banner. مظهره الافتراضي هو `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`. تستهدف الخصائص الأصلية و`className` و`style` و`ref` ذلك الجذر؛ ويمكن لـ Base UI `render` إنشاء عنصر آخر ويتلقى حالة Banner المحلولة. يقبل `action` أي ReactNode، بما في ذلك عناصر تحكم متعددة بواجهات 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.