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

# LightIconButton

> اعرض إجراءات أيقونات خفيفة بتركيز قياسي أو خافت.

## نظرة عامة

يؤلف `LightIconButton` بين [IconButton](https://docs.twenty.com/ar/ui/components/input/icon-button.md) وسطح شفاف وحجم صغير. وفّر اسمًا متاحًا ومحتوى أيقونة زخرفيًا.

**Light**

[زر أيقونة خفيف (light)](https://storybook.twenty.com/iframe.html?id=ui-input-button-lighticonbutton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[زر أيقونة خفيف (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-button-lighticonbutton--display\&viewMode=story\&globals=colorScheme:dark)

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

## استخدام

```tsx theme={null}
import { LightIconButton } from 'twenty-ui/components/input';
import { IconSearch } from 'twenty-ui/icon';

export const SearchAction = () => (
  <LightIconButton aria-label="Search">
    <IconSearch />
  </LightIconButton>
);
```

يستخدم التركيز القياسي نصًا محايدًا ثانويًا؛ ويستخدم التركيز الخافت نصًا من الدرجة الثالثة. يكون لمظهر العنصر الفرعي المحدد صراحةً الأولوية على قيم ButtonGroup، تليه الإعدادات الافتراضية للمكوّن. تحتفظ الألوان الدلالية بمعالجة التباين الخاصة بها. عناصر التحكم الصغيرة بحجم 24px مع أيقونة بحجم 14px؛ وعناصر التحكم المتوسطة بحجم 32px مع أيقونة بحجم 16px. تستخدم عناصر التحكم المدمجة `size="xs"` ويبلغ حجمها 20px.

## خيارات مرئية

قارن التأكيد عند الأحجام الصغيرة والمتوسطة، بما في ذلك حالات التحديد والتحميل والتعطيل.

**Light**

[تأكيد زر الأيقونة الفاتحة وأحجامه وحالاته (light)](https://storybook.twenty.com/iframe.html?id=ui-input-button-lighticonbutton--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[تأكيد زر الأيقونة الفاتحة وأحجامه وحالاته (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-button-lighticonbutton--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-button-lighticonbutton--catalog)

## الحالة والتفاعل

يتولى Button التنشيط بلوحة المفاتيح، وسلوك التعطيل والتحميل، والمراجع، والسمات الأصلية، وتأليف العرض. القيمة الأصلية الافتراضية هي `type="button"`. استخدم `aria-pressed` للتبديلات و`aria-expanded` للإفصاحات. يتولى التطبيق هذه الحالات ويمكنه تعيين `color="accent"` لإبراز إجراء محدد. يستخدم تركيز لوحة المفاتيح حلقة التركيز المشتركة.

نص Tooltip اختياري ولا يحل محل اسم يمكن الوصول إليه من `aria-label` أو `aria-labelledby`. عيّن `href` لرابط. للتوجيه الذي يملكه التطبيق، وفّر `render` و`nativeButton={false}` و`role="link"`.

## تحديث عناصر التحكم الحالية

استورد `LightIconButton` من `twenty-ui/components`. استبدل `Icon={IconPlus}` بأبناء `<IconPlus />`، و`small`/`medium` بـ`sm`/`md`، و`accent="tertiary"` بـ`emphasis="subtle"`، و`testId` بـ`data-testid`. استبدل علامتي `active` و`focus` الاصطناعيتين بالحالة الدلالية وتركيز لوحة المفاتيح الفعلي.

استبدل `LightIconButtonGroup` بـ[ButtonGroup](https://docs.twenty.com/ar/ui/primitives/input/button-group.md) باستخدام `attached={false}` وأبناء صريحين. عيّن `disabled` على الإجراءات غير المتاحة، بما في ذلك الإجراءات التي لا تحتوي على معالج نقر. يمكن أن تبقى الأغلفة ومشغلات التلميحات حول كل عنصر تابع.

## إجراءات الصف

استخدم [ListItem](https://docs.twenty.com/ar/ui/primitives/navigation/list-item.md) غير تفاعلي مع فتحة `actions` لعناصر التحكم المستقلة. مرّر `LightIconButton` واحدًا مباشرةً، أو استخدم `ButtonGroup` لأزرار متعددة. يحتفظ كل زر باسمه المتاح، ومعالج النقر، وحالة التعطيل الخاصة به. لفّ مشغلات القائمة المنسدلة مباشرةً حول الزر.

```tsx theme={null}
import { LightIconButton } from 'twenty-ui/components/input';
import { IconEyeOff, IconTrash } from 'twenty-ui/icon';
import { ButtonGroup } from 'twenty-ui/primitives/input';
import { ListItem } from 'twenty-ui/primitives/navigation';

export const RecordActions = () => (
  <ListItem
    actions={
      <ButtonGroup attached={false}>
        <LightIconButton aria-label="Hide record">
          <IconEyeOff />
        </LightIconButton>
        <LightIconButton aria-label="Delete record" disabled>
          <IconTrash />
        </LightIconButton>
      </ButtonGroup>
    }
  >
    Record
  </ListItem>
);
```

يمكن أن يبقى الزر الذي لا يحتوي على معالج `onClick` مفعّلًا عندما تتولى قائمة منسدلة محيطة تفاعله. عيّن `disabled` صراحةً للأزرار غير المتاحة. أبقِ عناصر التحكم المستقلة بجانب [ListItemButton](https://docs.twenty.com/ar/ui/components/navigation/list-item-button.md) قابل للتنفيذ بحيث يحتفظ كل منها بتركيزه وتفعيله الخاصين.

## الإزاحة

**aria-label** `string`

Accessible name describing the action. Required unless `aria-labelledby` supplies the name.

**aria-labelledby** `string`

ID of the element supplying the accessible name. Can be used instead of `aria-label`.

**children** `ReactNode` *required*

Icon content. Decorative and hidden from assistive technology.

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

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

**elevated** `boolean`

Adds a shadow and backdrop blur. Neutral outline buttons also use elevated surface colors.

**emphasis** `"standard" | "subtle"` (default: standard)

Standard secondary text or subtle tertiary text. Semantic colors and solid surfaces keep their own colors.

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

Whether the button should be focusable when disabled.

**href** `string`

Destination URL. Renders a native anchor when `render` is omitted unless `nativeButton` is explicitly true. Custom renderers retain their own element contract.

**loading** `boolean`

Shows a loading indicator and disables activation.

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

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

**role** `AriaRole`

Role of the root element. Use `link` for custom navigation renderers.

**shape** `"round" | "square"`

Square or round icon control.

**size** `"md" | "sm" | "xs"` (default: sm)

Button size: `xs` (20px), `sm` (24px), or `md` (32px).

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

**tooltip** `string`

Text displayed when hovering or focusing the button.

**tooltipDelay** `number`

Delay before showing the tooltip.

**tooltipOffset** `number`

Distance in pixels between the button and the tooltip.

**tooltipPlace** `"bottom" | "inline-end" | "inline-start" | "left" | "right" | "top"`

Preferred placement of the tooltip relative to the button.

**variant** `"ghost" | "link" | "outline" | "soft" | "solid"` (default: ghost)

Visual treatment of the button surface. `link` uses compact text styling without a filled surface or border; render composition determines native semantics.


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