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

> Declanșați acțiuni cu butoane de pictograme accesibile.

## Prezentare generală

`IconButton` compune [Buton](https://docs.twenty.com/ro/ui/primitives/input/button.md) cu o suprafață pătrată sau rotundă. Transmite pictograma ca element copil și furnizează un nume accesibil cu `aria-label` sau `aria-labelledby`. Conținutul pictogramei este decorativ și ascuns tehnologiilor asistive.

**Light**

[Buton cu pictogramă cu un nume accesibil (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Buton cu pictogramă cu un nume accesibil (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)

## Utilizare

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

Dimensiunile sunt `xs` (20px), `sm` (24px) și `md` (32px). Valorile implicite sunt `md`, `outline` și `neutral`. Variantele și culorile corespund cu Button. Utilizați `shape="round"` pentru un buton circular; forma implicită este `square`.

## Opțiuni vizuale

Comparați câte o opțiune vizuală pe rând. Folosiți exemplele cu tooltip denumit, cu elevație și grupate pentru compunere.

**Light**

[Variante, culori, dimensiuni, forme, elevație și stări ale butoanelor cu pictogramă (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Variante, culori, dimensiuni, forme, elevație și stări ale butoanelor cu pictogramă (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)

## Nume accesibile

Utilizează `aria-label` pentru un nume furnizat direct pe control. Când textul vizibil denumește deja acțiunea, utilizează în schimb `aria-labelledby` pentru a face referire la acesta. Este necesară cel puțin o proprietate de denumire.

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

[Buton cu pictogramă denumit prin text vizibil (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--labelled-by\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Buton cu pictogramă denumit prin text vizibil (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)

## Indiciu

Adăugați `tooltip` pentru a afișa text la trecerea cursorului și la focalizarea cu tastatura. Păstrează `aria-label` sau `aria-labelledby` ca nume accesibil al acțiunii. Butoanele dezactivate și cele în încărcare păstrează indiciile la trecerea cursorului.

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

[Buton cu pictogramă și indiciu (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--tooltip-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Buton cu pictogramă și indiciu (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)

Indiciul este poziționat implicit jos, cu o întârziere de 1000ms și un decalaj de 5px. Folosiți `tooltipPlace`, `tooltipDelay` și `tooltipOffset` pentru a-l ajusta. Omiterea `tooltip` afișează butonul direct.

## Gestionarea stării

Aplicația dvs. furnizează `loading` și `disabled`. Ambele împiedică activarea. Starea de încărcare păstrează dimensiunile pătrate și eticheta accesibilă. Butonul nu urmărește o valoare selectată și nu activează automat încărcarea după un clic. Focalizarea nativă cu tastatura urmează comportamentul browserului; folosiți `aria-pressed` atunci când aplicația dvs. gestionează o stare de comutare.

## Acțiuni elevate

Utilizați `elevated` pentru a adăuga o umbră și o estompare a fundalului. Butonul cu contur neutru implicit capătă, de asemenea, o suprafață cu bordură, cu culori corespunzătoare pentru pictogramă și interacțiune. Alte variante și culori semantice își păstrează paleta existentă.

`elevated` are valoarea implicită `false`. Nu modifică poziționarea, vizibilitatea sau dimensiunea. Dimensiunea rămâne implicit `md` (32px); setați `size="sm"` pentru 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**

[Acțiune cu pictogramă elevată (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--elevated\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Acțiune cu pictogramă elevată (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ți `elevated` sau setați-l la `false` pentru a restabili aspectul standard. Butoanele elevate acceptă aceleași sfaturi contextuale, stări de încărcare, linkuri și interacțiuni cu tastatura.

**Light**

[Acțiune cu pictogramă elevată cu sfat contextual (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--elevated-tooltip\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Acțiune cu pictogramă elevată cu sfat contextual (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)

Înlocuiți controalele `FloatingIconButton` existente cu `IconButton elevated`. Transmiteți pictograma ca elemente copil, utilizați `aria-label` nativ și mapați `small` la `sm` și `medium` la `md`. Furnizați `size="sm"` atunci când controlul anterior utiliza dimensiunea sa implicită. Focalizarea nativă și `aria-pressed` înlocuiesc focalizarea sintetică și indicatorii activi.

`FloatingIconButtonGroup` este eliminat. Compuneți ButtonGroup cu IconButton pentru acțiuni grupate și păstrați orice suprafață flotantă partajată în aspectul dvs.

## Acțiuni grupate

```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/ro/ui/primitives/input/button-group.md) furnizează valori implicite pentru dimensiune, variantă și culoare, plus colțuri adiacente. Proprietățile explicite ale elementelor copil au prioritate independent, inclusiv `size="xs"`. Butoanele individuale nu au nevoie de o proprietate de poziție.

Păstrați butoanele atașate la aceeași dimensiune, astfel încât marginile lor să fie aliniate. Setați dimensiunea pentru grup și lăsați fiecare buton să o moștenească.

**Light**

[Aspectul butonului individual cu pictogramă într-un grup (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--grouped-overrides\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Aspectul butonului individual cu pictogramă într-un grup (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)

## Linkuri și formulare

Fără un `render` personalizat, `href` redă o ancoră, cu excepția cazului în care `nativeButton` este explicit adevărat. Pentru o ancoră de navigare personalizată sau un link de router, setează `nativeButton={false}` și `role="link"`. Rendererul poate gestiona propria destinație fără un `href` pentru IconButton. Păstrează `nativeButton` ca adevărat pentru un buton nativ personalizat și utilizează fals pentru un element de acțiune nenativ. Proprietățile explicite nativeButton și role sunt păstrate. Linkurile dezactivate și cele în curs de încărcare nu se pot activa. Rutarea rămâne în aplicație.

Atributele butoanelor native și ale ancorelor, gestionarii de evenimente, detaliile evenimentelor, referințele și compunerea render se transmit către Button. Referința primește elementul rădăcină efectiv. Compunerea Tooltip păstrează acea rădăcină și numele său accesibil. Valoarea implicită este `type="button"`; setați explicit `type="submit"` pentru trimiterea formularului.

## Controale compacte și rotunde

Utilizați `size="xs"` pentru un control de 20px și `shape="round"` pentru colțuri circulare. Controalele `RoundedIconButton` existente devin `IconButton` cu `shape="round"`, `variant="solid"` și `color="accent"`. Asociați dimensiunea lor veche `small` cu `xs` și dimensiunea `medium` cu `sm`. Furnizați elemente copil de tip pictogramă și un nume accesibil.

**Light**

[Butoane rotunde cu pictogramă, în dimensiuni compacte și obișnuite (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--round-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Butoane rotunde cu pictogramă, în dimensiuni compacte și obișnuite (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)

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