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

> Attiva azioni con pulsanti icona accessibili.

## Panoramica

`IconButton` combina [Button](https://docs.twenty.com/it/ui/primitives/input/button.md) con una superficie quadrata o rotonda. Passa l'icona come elemento figlio e fornisci un nome accessibile con `aria-label` o `aria-labelledby`. Il contenuto dell'icona è decorativo e nascosto alle tecnologie assistive.

**Light**

[Pulsante icona con un nome accessibile (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Pulsante icona con un nome accessibile (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)

## Utilizzo

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

Le dimensioni sono `xs` (20px), `sm` (24px) e `md` (32px). I valori predefiniti sono `md`, `outline` e `neutral`. Varianti e colori corrispondono a Button. Usa `shape="round"` per un pulsante circolare; la forma predefinita è `square`.

## Opzioni visive

Confronta una scelta visiva alla volta. Usa gli esempi con tooltip denominato, elevato e raggruppato per la composizione.

**Light**

[Varianti, colori, dimensioni, forme, elevazione e stati dei pulsanti icona (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Varianti, colori, dimensioni, forme, elevazione e stati dei pulsanti icona (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)

## Nomi accessibili

Usa `aria-label` per un nome fornito direttamente nel controllo. Quando il testo visibile denomina già l'azione, usa invece `aria-labelledby` per farvi riferimento. È richiesta almeno una prop per il nome.

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

[Pulsante icona denominato dal testo visibile (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--labelled-by\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Pulsante icona denominato dal testo visibile (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)

## Tooltip

Aggiungi `tooltip` per mostrare testo al passaggio del mouse e quando il focus è sulla tastiera. Mantieni `aria-label` o `aria-labelledby` come nome accessibile dell'azione. I pulsanti disabilitati e in caricamento mantengono i tooltip al passaggio del mouse.

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

[Pulsante icona con tooltip (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--tooltip-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

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

Per impostazione predefinita, il tooltip viene visualizzato in basso, con un ritardo di 1000 ms e uno scostamento di 5 px. Usa `tooltipPlace`, `tooltipDelay` e `tooltipOffset` per modificarlo. Omettendo `tooltip`, il pulsante viene visualizzato direttamente.

## Proprietà dello stato

L'applicazione fornisce `loading` e `disabled`. Entrambi impediscono l'attivazione. Lo stato di caricamento mantiene le dimensioni quadrate e l'etichetta accessibile. Il pulsante non tiene traccia di un valore selezionato né imposta automaticamente lo stato di caricamento dopo un clic. Il focus nativo da tastiera segue il browser; usa `aria-pressed` quando l'applicazione gestisce uno stato di attivazione/disattivazione.

## Azioni elevate

Usa `elevated` per aggiungere un'ombra e la sfocatura dello sfondo. Anche il pulsante con contorno neutro predefinito ottiene una superficie con bordo, con colori corrispondenti per l'icona e l'interazione. Le altre varianti e i colori semantici mantengono la palette esistente.

`elevated` è impostato su `false` per impostazione predefinita. Non modifica il posizionamento, la visibilità o le dimensioni. Per impostazione predefinita, la dimensione rimane `md` (32px); imposta `size="sm"` per un controllo da 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**

[Azione icona con rilievo (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--elevated\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Azione icona con rilievo (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)

Ometti `elevated` o impostalo su `false` per ripristinare l'aspetto standard. I pulsanti con rilievo supportano gli stessi tooltip, stati di caricamento, link e interazioni da tastiera.

**Light**

[Azione icona con rilievo e tooltip (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--elevated-tooltip\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Azione icona con rilievo e tooltip (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)

Sostituisci i controlli `FloatingIconButton` esistenti con `IconButton elevated`. Passa l'icona come `children`, usa `aria-label` nativo e mappa `small` a `sm` e `medium` a `md`. Fornisci `size="sm"` quando il controllo precedente utilizzava la dimensione predefinita. Il focus nativo e `aria-pressed` sostituiscono il focus sintetico e i flag attivi.

`FloatingIconButtonGroup` è stato rimosso. Combina `ButtonGroup` con `IconButton` per le azioni raggruppate e mantieni nel layout qualsiasi superficie fluttuante condivisa.

## Azioni raggruppate

```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/it/ui/primitives/input/button-group.md) fornisce valori predefiniti per dimensione, variante e colore, oltre ad angoli contigui. Le prop esplicite degli elementi figlio hanno la precedenza in modo indipendente, incluso `size="xs"`. I singoli pulsanti non necessitano di una prop di posizione.

Mantieni i pulsanti collegati della stessa dimensione affinché i loro bordi siano allineati. Imposta la dimensione sul gruppo e lascia che ogni pulsante la erediti.

**Light**

[Aspetto del singolo pulsante icona in un gruppo (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--grouped-overrides\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Aspetto del singolo pulsante icona in un gruppo (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)

## Link e moduli

Senza un `render` personalizzato, `href` esegue il rendering di un'ancora, a meno che `nativeButton` non sia esplicitamente true. Per un'ancora di navigazione personalizzata o un collegamento del router, imposta `nativeButton={false}` e `role="link"`. Il renderer può gestire la propria destinazione senza un `href` di IconButton. Mantieni `nativeButton` su true per un pulsante nativo personalizzato e usa false per un elemento azione non nativo. Le prop esplicite nativeButton e role vengono mantenute. I collegamenti disabilitati e in caricamento non possono essere attivati. Il routing rimane nell'applicazione.

Gli attributi del pulsante nativo e dell'ancora, i gestori di eventi, i dettagli degli eventi, i ref e la composizione del render vengono passati a Button. Il ref riceve l'effettivo elemento radice. La composizione del tooltip mantiene quella radice e il relativo nome accessibile. Il valore predefinito è `type="button"`; imposta esplicitamente `type="submit"` per l'invio del modulo.

## Controlli compatti e rotondi

Usa `size="xs"` per un controllo da 20px e `shape="round"` per angoli circolari. I controlli `RoundedIconButton` esistenti diventano `IconButton` con `shape="round"`, `variant="solid"` e `color="accent"`. Mappa la precedente dimensione `small` a `xs` e la dimensione `medium` a `sm`. Fornisci elementi figlio icona e un nome accessibile.

**Light**

[Pulsanti icona rotondi in dimensioni compatte e regolari (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--round-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Pulsanti icona rotondi in dimensioni compatte e regolari (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.