> ## 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/ru/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 отвечает за активацию с клавиатуры, поведение при отключении и загрузке, refs, нативные атрибуты и композицию рендеринга. Нативное значение по умолчанию — `type="button"`. Используйте `aria-pressed` для переключателей и `aria-expanded` для раскрывающихся элементов. Приложение управляет этими состояниями и может задать `color="accent"`, чтобы выделить выбранное действие. Фокус с клавиатуры использует общее кольцо фокуса.

Текст всплывающей подсказки необязателен и не заменяет доступное имя из `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/ru/ui/primitives/input/button-group.md), используя `attached={false}` и явные дочерние элементы. Задайте `disabled` для недоступных действий, включая действия без обработчика клика. Обертки и триггеры всплывающих подсказок могут оставаться вокруг каждого дочернего элемента.

## Действия строки

Используйте пассивный [ListItem](https://docs.twenty.com/ru/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/ru/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.