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

> Presenta azioni icona leggere con enfasi standard o discreta.

## Panoramica

`LightIconButton` compone [IconButton](https://docs.twenty.com/it/ui/components/input/icon-button.md) con una superficie ghost e dimensioni ridotte. Fornisci un nome accessibile e contenuto dell'icona decorativo.

**Light**

[Pulsante icona leggero (light)](https://storybook.twenty.com/iframe.html?id=ui-input-button-lighticonbutton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Pulsante icona leggero (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)

## Utilizzo

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

L'enfasi standard utilizza testo neutro secondario; l'enfasi discreta utilizza testo terziario. L'aspetto esplicito dell'elemento figlio ha la precedenza sui valori di ButtonGroup, seguito dai valori predefiniti del componente. I colori semantici mantengono il proprio trattamento del contrasto. I controlli piccoli sono di 24px con un'icona di 14px; i controlli medi sono di 32px con un'icona di 16px. I controlli compatti utilizzano `size="xs"` e sono di 20px.

## Opzioni visive

Confronta l'enfasi nelle dimensioni piccola e media, inclusi gli stati selezionato, di caricamento e disabilitato.

**Light**

[Enfasi, dimensioni e stati del pulsante icona chiara (light)](https://storybook.twenty.com/iframe.html?id=ui-input-button-lighticonbutton--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Enfasi, dimensioni e stati del pulsante icona chiara (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)

## Stato e interazione

Il pulsante gestisce l'attivazione tramite tastiera, il comportamento disabilitato e di caricamento, i ref, gli attributi nativi e la composizione del rendering. Il valore predefinito nativo è `type="button"`. Utilizza `aria-pressed` per gli interruttori e `aria-expanded` per le divulgazioni. L'applicazione gestisce questi stati e può impostare `color="accent"` per evidenziare un'azione selezionata. Lo stato attivo da tastiera utilizza l'anello di focus condiviso.

Il testo del tooltip è facoltativo e non sostituisce un nome accessibile da `aria-label` o `aria-labelledby`. Imposta `href` per un link. Per il routing gestito dall'applicazione, fornisci `render`, `nativeButton={false}` e `role="link"`.

## Aggiornamento dei controlli esistenti

Importa `LightIconButton` da `twenty-ui/components`. Sostituisci `Icon={IconPlus}` con i figli `<IconPlus />`, `small`/`medium` con `sm`/`md`, `accent="tertiary"` con `emphasis="subtle"` e `testId` con `data-testid`. Sostituisci i flag sintetici `active` e `focus` con lo stato semantico e l'effettivo focus da tastiera.

Sostituisci `LightIconButtonGroup` con [ButtonGroup](https://docs.twenty.com/it/ui/primitives/input/button-group.md) utilizzando `attached={false}` e figli espliciti. Imposta `disabled` sulle azioni non disponibili, incluse le azioni senza un gestore di clic. I wrapper e gli attivatori di tooltip possono rimanere attorno a ciascun figlio.

## Azioni della riga

Usa un [ListItem](https://docs.twenty.com/it/ui/primitives/navigation/list-item.md) passivo con uno slot `actions` per controlli indipendenti. Passa direttamente un `LightIconButton` oppure utilizza `ButtonGroup` per più pulsanti. Ogni pulsante dispone del proprio nome accessibile, gestore di clic e stato disabilitato. Avvolgi gli attivatori dei menu a discesa direttamente attorno al pulsante.

```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 pulsante senza un gestore `onClick` può rimanere abilitato quando un menu a discesa circostante gestisce la sua interazione. Imposta esplicitamente `disabled` per i pulsanti non disponibili. Mantieni i controlli indipendenti accanto a un [ListItemButton](https://docs.twenty.com/it/ui/components/navigation/list-item-button.md) azionabile affinché ciascuno mantenga il proprio stato attivo e attivazione.

## Props

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