> ## 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 acciones de icono ligeras con énfasis estándar o sutil.

## Resumen

`LightIconButton` compone [IconButton](https://docs.twenty.com/es/ui/components/input/icon-button.md) con una superficie fantasma y un tamaño pequeño. Proporciona un nombre accesible y contenido de icono decorativo.

**Light**

[Botón de Ícono Claro (light)](https://storybook.twenty.com/iframe.html?id=ui-input-button-lighticonbutton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Botón de Ícono Claro (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)

## "Uso"

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

El énfasis estándar usa texto neutro secundario; el énfasis sutil usa texto terciario. La apariencia explícita del elemento secundario tiene prioridad sobre los valores de ButtonGroup, seguida de los valores predeterminados del componente. Los colores semánticos conservan su propio tratamiento de contraste. Los controles pequeños son de 24 px con un icono de 14 px; los controles medianos son de 32 px con un icono de 16 px. Los controles compactos usan `size="xs"` y son de 20 px.

## Opciones visuales

Compare el énfasis en tamaños pequeño y mediano, incluidos los estados seleccionado, de carga y deshabilitado.

**Light**

[Énfasis, tamaños y estados del botón con icono claro (light)](https://storybook.twenty.com/iframe.html?id=ui-input-button-lighticonbutton--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Énfasis, tamaños y estados del botón con icono claro (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)

## Estado e interacción

El botón gestiona la activación mediante teclado, el comportamiento deshabilitado y de carga, las refs, los atributos nativos y la composición de renderizado. El valor predeterminado nativo es `type="button"`. Usa `aria-pressed` para los conmutadores y `aria-expanded` para los elementos desplegables. La aplicación gestiona estos estados y puede establecer `color="accent"` para resaltar una acción seleccionada. El foco del teclado usa el anillo de foco compartido.

El texto de la información sobre herramientas es opcional y no sustituye un nombre accesible de `aria-label` o `aria-labelledby`. Establece `href` para un enlace. Para el enrutamiento controlado por la aplicación, proporciona `render`, `nativeButton={false}` y `role="link"`.

## Actualización de controles existentes

Importa `LightIconButton` desde `twenty-ui/components`. Reemplaza `Icon={IconPlus}` por elementos secundarios `<IconPlus />`, `small`/`medium` por `sm`/`md`, `accent="tertiary"` por `emphasis="subtle"` y `testId` por `data-testid`. Reemplaza las marcas sintéticas `active` y `focus` por estado semántico y foco real del teclado.

Reemplaza `LightIconButtonGroup` por [ButtonGroup](https://docs.twenty.com/es/ui/primitives/input/button-group.md) usando `attached={false}` y elementos secundarios explícitos. Establece `disabled` en las acciones no disponibles, incluidas las acciones sin un controlador de clic. Los contenedores y los activadores de información sobre herramientas pueden permanecer alrededor de cada elemento secundario.

## Acciones de fila

Utiliza un [ListItem](https://docs.twenty.com/es/ui/primitives/navigation/list-item.md) pasivo con una ranura `actions` para controles independientes. Pasa un `LightIconButton` directamente o usa `ButtonGroup` para varios botones. Cada botón tiene su propio nombre accesible, controlador de clic y estado deshabilitado. Envuelve los activadores de menús desplegables directamente alrededor del botón.

```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 botón sin un controlador `onClick` puede permanecer habilitado cuando un menú desplegable circundante gestiona su interacción. Establece explícitamente `disabled` para los botones no disponibles. Mantén los controles independientes junto a un [ListItemButton](https://docs.twenty.com/es/ui/components/navigation/list-item-button.md) accionable para que cada uno conserve su propio foco y activación.

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