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

# ListItemButton

> أزرار إجراءات أصلية بمظهر صف القائمة المشترك.

## نظرة عامة

استخدم `ListItemButton` لصفوف الإجراءات وأزرار الاختيار المستقلة. يجمع بين تخطيط [ListItem](https://docs.twenty.com/ar/ui/primitives/navigation/list-item.md) وزر أصلي، بما في ذلك التفعيل بمفتاحي Enter وSpace، والتركيز، وسلوك التعطيل. يكون افتراضيًا `type="button"`.

**Light**

[مثال ListItemButton (light)](https://storybook.twenty.com/iframe.html?id=ui-components-listitembutton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال ListItemButton (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-listitembutton--display\&viewMode=story\&globals=colorScheme:dark)

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

## استخدام

```tsx theme={null}
import { ListItemButton } from 'twenty-ui/components/navigation';
import { IconCopy } from 'twenty-ui/icon';

export const DuplicateAction = ({
  onDuplicate,
}: {
  onDuplicate: () => void;
}) => (
  <ListItemButton
    startIcon={<IconCopy />}
    description="Create a copy"
    onClick={onDuplicate}
  >
    Duplicate
  </ListItemButton>
);
```

## الإجراءات وحالة التعطيل

مرر `onClick` و`disabled` مباشرةً. تستخدم الأزرار المعطلة مظهر الصف المطابق، وتمنع التفعيل، وتبقى في ترتيب التنقل بعلامة التبويب.

```tsx theme={null}
import { ListItemButton } from 'twenty-ui/components/navigation';
import { IconCopy } from 'twenty-ui/icon';

type DuplicateActionProps = {
  onDuplicate: () => void;
  disabled?: boolean;
};

export const DuplicateAction = ({
  onDuplicate,
  disabled = false,
}: DuplicateActionProps) => (
  <ListItemButton
    disabled={disabled}
    onClick={onDuplicate}
    startIcon={<IconCopy />}
    description="Create a copy"
  >
    Duplicate
  </ListItemButton>
);
```

**Light**

[صف إجراء معطل (light)](https://storybook.twenty.com/iframe.html?id=ui-components-listitembutton--disabled\&viewMode=story\&globals=colorScheme:light)

**Dark**

[صف إجراء معطل (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-listitembutton--disabled\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-listitembutton--disabled)

اضبط `focusableWhenDisabled` لإبقاء زر معطل قابلاً للتركيز. يستخدم `aria-disabled` ويستمر في حظر التفعيل. تصل سمات الزر الأصلي وأحداثه وأنماطه وأسماء فئاته ومرجع `HTMLButtonElement` إلى الزر. تنتشر الأحداث بصورة طبيعية؛ ويوفر المستدعون أي سياسة لـ `stopPropagation()` أو `preventDefault()`.

## الاختيار والمواضع المرئية

يتحكم تطبيقك في الحالات المستقلة `active` و`selected` و`focused`. استخدم `active` للصف المفتوح أو الحالي. اقرن `selected` بالحالة المناسبة لإمكانية الوصول، مثل `aria-pressed` لزر التبديل. يبرز `focused` الصف دون نقل تركيز DOM. المؤشرات وتلميحات الاختصارات للزينة؛ يسجل تطبيقك الاختصارات ويتعامل مع التنقل.

```tsx theme={null}
import { useState } from 'react';
import { ListItemButton } from 'twenty-ui/components/navigation';

export const ShowArchivedToggle = () => {
  const [selected, setSelected] = useState(false);

  return (
    <ListItemButton
      aria-pressed={selected}
      selected={selected}
      indicator="check"
      onClick={() => setSelected(!selected)}
    >
      Show archived records
    </ListItemButton>
  );
};
```

**Light**

[صف الإجراء المحدد (light)](https://storybook.twenty.com/iframe.html?id=ui-components-listitembutton--selected\&viewMode=story\&globals=colorScheme:light)

**Dark**

[صف الإجراء المحدد (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-listitembutton--selected\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-listitembutton--selected)

استخدم `startIcon` و`endIcon` و`description` و`descriptionPlacement` للمحتوى الداعم. يحدد `color="danger"` إجراءً إتلافيًا. يتحكم `shortcutJoinLabel` في النص بين الاختصارات المتتالية، ويعرض `hasSubmenu` مؤشر قائمة فرعية.

## محتوى داعم متعدد الأسطر

عيّن `descriptionPlacement="below"` للالتفاف بالنص الداعم أسفل التسمية. تحتفظ التسمية بسلوك اقتطاعها. مرر [Text](https://docs.twenty.com/ar/ui/primitives/typography/text.md) مع `truncate` أو `lineClamp` باعتباره `description` عندما تحتاج إلى معاينة أقصر. يحتفظ الموضعان `inline` و`end` بمظهرهما الحالي.

```tsx theme={null}
import { ListItemButton } from 'twenty-ui/components/navigation';
import { Avatar } from 'twenty-ui/primitives/data-display';

type PlanningActionProps = {
  active?: boolean;
  disabled?: boolean;
  onOpen: () => void;
};

export const PlanningAction = ({
  active = false,
  disabled = false,
  onOpen,
}: PlanningActionProps) => (
  <ListItemButton
    active={active}
    disabled={disabled}
    descriptionPlacement="below"
    description="Review the proposed timeline and confirm the next steps with the team."
    startIcon={<Avatar name="Alex Morgan" size="md" imageProps={{ alt: '' }} />}
    onClick={onOpen}
  >
    Quarterly planning
  </ListItemButton>
);
```

يطبّق `active` خلفية الصف الحالي. عيّن `selectionAppearance="accent"` لتعبئة مميزة في الصفوف المحددة مع أي موضع للوصف؛ ويحافظ الإعداد الافتراضي على تنسيق التحديد الحالي المستند إلى المؤشر. يطبّق `focused` الخلفية المميزة المشتركة؛ ويتبع مخطط التركيز المرئي التركيز الفعلي للوحة المفاتيح. لا تضيف هذه الخصائص حالة قابلة للوصول ولا تنقل التركيز. يبقى سلوك التنشيط والتعطيل الأصلي للزر دون تغيير.

## عناصر تحكم مستقلة

أبقِ الأزرار المستقلة ومربعات الاختيار بجانب `ListItemButton` لكي يحتفظ كل منها بتركيزه وتنشيطه الخاصين. لا تضمّنها داخل فتحات المحتوى أو الأيقونة الخاصة به. لا يحتوي المكون على موضع `actions`. استخدم `ListItem` مع جذر `div` الافتراضي الخاص به لـ[صف يحتوي على عناصر تحكم مستقلة](https://docs.twenty.com/ar/ui/primitives/navigation/list-item.md#independent-controls)، ووفّر سلوك التعطيل وانتشار الأحداث لكل عنصر تحكم.

```tsx theme={null}
import { ListItemButton } from 'twenty-ui/components/navigation';
import { Button } from 'twenty-ui/primitives/input';

type ContactActionsProps = {
  onOpen: () => void;
  onDetails: () => void;
};

export const ContactActions = ({ onOpen, onDetails }: ContactActionsProps) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <ListItemButton onClick={onOpen} description="Account owner">
      Alex Morgan
    </ListItemButton>
    <Button onClick={onDetails} aria-label="Open Alex Morgan's details">
      Details
    </Button>
  </div>
);
```

**Light**

[عناصر تحكم الإجراءات الشقيقة (light)](https://storybook.twenty.com/iframe.html?id=ui-components-listitembutton--independent-action\&viewMode=story\&globals=colorScheme:light)

**Dark**

[عناصر تحكم الإجراءات الشقيقة (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-listitembutton--independent-action\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-listitembutton--independent-action)

استخدم `ListItem` للمحتوى السلبي أو الروابط أو المالكين الدلاليين المخصصين. استخدم أجزاء العناصر الموجودة في [Dropdown](https://docs.twenty.com/ar/ui/components/navigation/dropdown.md) و[Select](https://docs.twenty.com/ar/ui/primitives/input/select.md) ضمن مالكي النوافذ المنبثقة الخاصة بها، التي توفر الأدوار والتنقل باستخدام لوحة المفاتيح.

## الإزاحة

**active** `boolean`

Marks the open or current item independently of selection and focus. The caller supplies accessible state.

**color** `"danger" | "neutral"`

Color of the text and icons. `danger` marks a destructive action.

**description** `ReactNode`

Supporting text, placed according to `descriptionPlacement`.

**descriptionPlacement** `"below" | "end" | "inline"`

Places supporting content inline after the label, at the end, or below it with wrapping. Inline is the default.

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

Disables activation and applies the matching row appearance.

**endIcon** `ReactNode`

Icon rendered after the content.

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

Keeps a disabled button focusable with aria-disabled while preventing activation.

**focused** `boolean`

Highlights the row without moving DOM focus.

**hasSubmenu** `boolean`

Displays a decorative submenu indicator.

**indicator** `"check" | "checkbox" | "none"`

Selection indicator: a check icon after the content or a checkbox before
it.

**ref** `Ref\<HTMLButtonElement\>`

Ref to the native HTMLButtonElement.

**selected** `boolean`

Applies selected styling and a decorative indicator. The caller supplies selection state and accessible semantics.

**selectionAppearance** `"accent" | "default"`

Selection styling independent of description placement. `default` preserves indicator-based styling; `accent` fills selected rows with the accent background.

**shortcut** `ShortcutDefinition`

Displays decorative shortcut hints. The caller registers the shortcuts.

**shortcutJoinLabel** `string`

Text between sequential shortcut steps. Defaults to `then`; pass an empty string to omit it.

**startIcon** `ReactNode`

Icon rendered before the content.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.