> ## 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` زرًا صغيرًا بإطار يرث اللون المعروض للشعار، بما في ذلك تجاوزات لوحة الألوان الصريحة والمظاهر الصلبة. وهو يدعم تفاعلات Button والروابط وrefs والعرض المخصص. تقبل خانة `action` أيضًا عناصر تحكم عشوائية.

الهدف الجذري هو `div`. تنطبق السمات الأصلية ومعالجات الأحداث و`className` و`style` و`ref` على ذلك الجذر. يقبل `render` عنصر Base UI أو دالة رد نداء؛ وتتلقى دالة رد النداء الخصائص الأصلية وref، بالإضافة إلى حالة `status` و`variant` و`color` المحلولة. حافظ على الخصائص و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` لعرض عنصر تحكم إغلاق شفاف بحجم 24px عند النهاية المنطقية للسطر. يرث عنصر التحكم لون اللافتة ويتضمن `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.