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

> Prezentați acțiuni ușoare cu pictograme, cu accent standard sau subtil.

## Prezentare generală

`LightIconButton` compune [IconButton](https://docs.twenty.com/ro/ui/components/input/icon-button.md) cu o suprafață ghost și o dimensiune mică. Furnizați un nume accesibil și conținut decorativ pentru pictogramă.

**Light**

[Buton cu pictogramă luminos (light)](https://storybook.twenty.com/iframe.html?id=ui-input-button-lighticonbutton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Buton cu pictogramă luminos (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)

## Utilizare

```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>
);
```

Accentul standard utilizează text neutru secundar; accentul subtil utilizează text terțiar. Aspectul explicit al elementului copil are prioritate față de valorile ButtonGroup, urmat de valorile implicite ale componentei. Culorile semantice își păstrează propriul tratament de contrast. Controalele mici au 24px cu o pictogramă de 14px; controalele medii au 32px cu o pictogramă de 16px. Controalele compacte utilizează `size="xs"` și au 20px.

## Opțiuni vizuale

Comparați accentuarea la dimensiuni mici și medii, inclusiv stările selectată, de încărcare și dezactivată.

**Light**

[Accentuarea, dimensiunile și stările butonului cu pictogramă deschisă la culoare (light)](https://storybook.twenty.com/iframe.html?id=ui-input-button-lighticonbutton--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Accentuarea, dimensiunile și stările butonului cu pictogramă deschisă la culoare (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)

## Stare și interacțiune

Butonul gestionează activarea de la tastatură, comportamentul de dezactivare și încărcare, referințele, atributele native și compunerea randării. Valoarea implicită nativă este `type="button"`. Utilizați `aria-pressed` pentru comutatoare și `aria-expanded` pentru elementele de extindere. Aplicația gestionează aceste stări și poate seta `color="accent"` pentru a evidenția o acțiune selectată. Focalizarea de la tastatură utilizează indicatorul de focalizare partajat.

Textul indicativ este opțional și nu înlocuiește un nume accesibil din `aria-label` sau `aria-labelledby`. Setați `href` pentru un link. Pentru rutarea gestionată de aplicație, furnizați `render`, `nativeButton={false}` și `role="link"`.

## Actualizarea controalelor existente

Importați `LightIconButton` din `twenty-ui/components`. Înlocuiți `Icon={IconPlus}` cu copii `<IconPlus />`, `small`/`medium` cu `sm`/`md`, `accent="tertiary"` cu `emphasis="subtle"` și `testId` cu `data-testid`. Înlocuiți indicatorii sintetici `active` și `focus` cu starea semantică și focalizarea reală de la tastatură.

Înlocuiți `LightIconButtonGroup` cu [ButtonGroup](https://docs.twenty.com/ro/ui/primitives/input/button-group.md) utilizând `attached={false}` și copii expliciți. Setați `disabled` pentru acțiunile indisponibile, inclusiv pentru acțiunile fără un handler de clic. Containerele și declanșatoarele de indicii pot rămâne în jurul fiecărui copil.

## Acțiuni pentru rând

Utilizați un [ListItem](https://docs.twenty.com/ro/ui/primitives/navigation/list-item.md) pasiv cu un slot `actions` pentru controale independente. Transmiteți direct un `LightIconButton` sau utilizați `ButtonGroup` pentru mai multe butoane. Fiecare buton are propriul nume accesibil, propriul gestionar de clic și propria stare de dezactivare. Încadrați direct declanșatoarele listelor derulante în jurul butonului.

```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>
);
```

Un buton fără handler `onClick` poate rămâne activat atunci când o listă derulantă din jur gestionează interacțiunea sa. Setați explicit `disabled` pentru butoanele indisponibile. Păstrați controalele independente lângă un [ListItemButton](https://docs.twenty.com/ro/ui/components/navigation/list-item-button.md) acționabil, astfel încât fiecare să își păstreze propriul focus și propria activare.

## Proprietăți

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