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

# IconButton

> Activa acciones con botones de icono accesibles.

## Resumen

`IconButton` compone [Button](https://docs.twenty.com/es/ui/primitives/input/button.md) con una superficie cuadrada o redonda. Pase el icono como elemento secundario y proporcione un nombre accesible con `aria-label` o `aria-labelledby`. El contenido del icono es decorativo y está oculto para la tecnología de asistencia.

**Light**

[Botón de icono con un nombre accesible (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Botón de icono con un nombre accesible (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--display\&viewMode=story\&globals=colorScheme:dark)

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

## Uso

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

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

Los tamaños son `xs` (20px), `sm` (24px) y `md` (32px). Los valores predeterminados son `md`, `outline` y `neutral`. Las variantes y los colores coinciden con Button. Usa `shape="round"` para un botón circular; la forma predeterminada es `square`.

## Opciones visuales

Compare una opción visual a la vez. Use los ejemplos de tooltip con nombre, elevado y agrupado para la composición.

**Light**

[Variantes, colores, tamaños, formas, elevación y estados de botones de icono (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Variantes, colores, tamaños, formas, elevación y estados de botones de icono (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--catalog\&viewMode=story\&globals=colorScheme:dark)

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

## Nombres accesibles

Use `aria-label` para un nombre proporcionado directamente en el control. Cuando el texto visible ya nombra la acción, use `aria-labelledby` para hacer referencia a él en su lugar. Se requiere al menos una prop de nombre.

```tsx theme={null}
import { IconButton } from 'twenty-ui/components/input';
import { IconSearch } from 'twenty-ui/icon';
import { Text } from 'twenty-ui/primitives/typography';

export const LabelledSearchButton = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
    <Text render={<span />} id="records-search-label">
      Search records
    </Text>
    <IconButton aria-labelledby="records-search-label" tooltip="Find a record">
      <IconSearch />
    </IconButton>
  </Text>
);
```

**Light**

[Botón de icono nombrado por texto visible (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--labelled-by\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Botón de icono nombrado por texto visible (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--labelled-by\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-iconbutton--labelled-by)

## Información sobre herramientas

Añade `tooltip` para mostrar texto al pasar el cursor y al enfocar con el teclado. Mantenga `aria-label` o `aria-labelledby` como el nombre accesible de la acción. Los botones deshabilitados y en carga conservan la información sobre herramientas al pasar el cursor.

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

export const SearchRecordsButton = () => (
  <IconButton aria-label="Search" tooltip="Search records">
    <IconSearch />
  </IconButton>
);
```

**Light**

[Botón de icono con información sobre herramientas (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--tooltip-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Botón de icono con información sobre herramientas (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--tooltip-documentation\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-iconbutton--tooltip-documentation)

La información sobre herramientas se muestra de forma predeterminada abajo, con un retraso de 1000ms y un desplazamiento de 5px. Usa `tooltipPlace`, `tooltipDelay` y `tooltipOffset` para ajustarla. Al omitir `tooltip`, el botón se muestra directamente.

## Propiedad del estado

Tu aplicación proporciona `loading` y `disabled`. Ambos impiden la activación. El estado de carga conserva las dimensiones cuadradas y la etiqueta accesible. El botón no realiza seguimiento de un valor seleccionado ni establece la carga automáticamente después de un clic. El enfoque nativo con el teclado sigue al navegador; usa `aria-pressed` cuando tu aplicación controle un estado de alternancia.

## Acciones elevadas

Usa `elevated` para añadir una sombra y desenfoque de fondo. El botón de contorno neutro predeterminado también obtiene una superficie con borde y colores de icono e interacción a juego. Otras variantes y colores semánticos conservan su paleta actual.

`elevated` tiene como valor predeterminado `false`. No cambia la posición, la visibilidad ni el tamaño. El tamaño sigue siendo `md` (32px) de forma predeterminada; establece `size="sm"` para un control de 24px.

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

export const AddWidgetButton = () => (
  <IconButton elevated size="sm" aria-label="Add widget">
    <IconPlus />
  </IconButton>
);
```

**Light**

[Acción de icono elevada (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--elevated\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Acción de icono elevada (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--elevated\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-iconbutton--elevated)

Omite `elevated` o establécelo en `false` para restaurar la apariencia estándar. Los botones elevados admiten las mismas descripciones emergentes, estados de carga, enlaces e interacciones de teclado.

**Light**

[Acción de icono elevada con descripción emergente (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--elevated-tooltip\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Acción de icono elevada con descripción emergente (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--elevated-tooltip\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-iconbutton--elevated-tooltip)

Sustituye los controles `FloatingIconButton` existentes por `IconButton elevated`. Pasa el icono como elementos secundarios, usa `aria-label` nativo y asigna `small` a `sm` y `medium` a `md`. Proporciona `size="sm"` cuando el control anterior usaba su tamaño predeterminado. El foco nativo y `aria-pressed` sustituyen el foco sintético y los indicadores activos.

Se elimina `FloatingIconButtonGroup`. Combina ButtonGroup con IconButton para acciones agrupadas y conserva cualquier superficie flotante compartida en tu diseño.

## Acciones agrupadas

```tsx theme={null}
import { ButtonGroup } from 'twenty-ui/primitives/input';
import { IconButton } from 'twenty-ui/components/input';
import { IconPlus, IconSearch } from 'twenty-ui/icon';

export const RecordActions = () => (
  <ButtonGroup
    aria-label="Record actions"
    size="sm"
    variant="solid"
    color="accent"
  >
    <IconButton
      aria-label="Search records"
      tooltip="Search records"
      variant="outline"
      color="neutral"
    >
      <IconSearch />
    </IconButton>
    <IconButton aria-label="Create record" tooltip="Create record">
      <IconPlus />
    </IconButton>
  </ButtonGroup>
);
```

[ButtonGroup](https://docs.twenty.com/es/ui/primitives/input/button-group.md) proporciona valores predeterminados para el tamaño, la variante y el color, además de esquinas contiguas. Las props explícitas de los elementos secundarios tienen prioridad de forma independiente, incluido `size="xs"`. Los botones individuales no necesitan una propiedad position.

Mantenga los botones unidos del mismo tamaño para que sus bordes queden alineados. Establezca el tamaño en el grupo y deje que cada botón lo herede.

**Light**

[Apariencia individual del botón de icono en un grupo (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--grouped-overrides\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Apariencia individual del botón de icono en un grupo (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--grouped-overrides\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-iconbutton--grouped-overrides)

## Enlaces y formularios

Sin un `render` personalizado, `href` representa un ancla, a menos que `nativeButton` sea explícitamente verdadero. Para un ancla de navegación personalizada o un enlace de enrutador, establezca `nativeButton={false}` y `role="link"`. El renderizador puede gestionar su destino sin un `href` de IconButton. Mantenga `nativeButton` en verdadero para un botón nativo personalizado y use falso para un elemento de acción no nativo. Se conservan las props explícitas de nativeButton y role. Los enlaces deshabilitados y en carga no se pueden activar. El enrutamiento permanece en la aplicación.

Los atributos de botones nativos y anclas, los controladores de eventos, los detalles de eventos, las referencias y la composición de renderizado se transfieren a Button. La referencia recibe el elemento raíz real. La composición de Tooltip conserva esa raíz y su nombre accesible. El valor predeterminado es `type="button"`; establece `type="submit"` explícitamente para el envío de formularios.

## Controles compactos y redondos

Usa `size="xs"` para un control de 20px y `shape="round"` para bordes circulares. Los controles `RoundedIconButton` existentes pasan a ser `IconButton` con `shape="round"`, `variant="solid"` y `color="accent"`. Asigna su antiguo tamaño `small` a `xs` y el tamaño `medium` a `sm`. Proporciona elementos secundarios de icono y un nombre accesible.

**Light**

[Botones de icono redondos en tamaños compacto y regular (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--round-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Botones de icono redondos en tamaños compacto y regular (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--round-documentation\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-components-iconbutton--round-documentation)

## "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"` (default: neutral)

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.

**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 (false for the built-in href anchor))

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"` (default: square)

Square or round icon control.

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

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` (default: 1000)

Delay before showing the tooltip.

**tooltipOffset** `number` (default: 5)

Distance in pixels between the button and the tooltip.

**tooltipPlace** `"bottom" | "inline-end" | "inline-start" | "left" | "right" | "top"` (default: bottom)

Preferred placement of the tooltip relative to the button.

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

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.