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