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

# ButtonGroup

> Grupați butoanele asociate cu un aspect comun și un cadru opțional.

## Prezentare generală

Oferiți unui grup un nume accesibil și plasați în interiorul acestuia butoanele asociate. Grupul unește marginile adiacente și poate aplica valori implicite pentru dimensiune, variantă și culoare. Butoanele își păstrează propriile opriri de tabulare.

**Light**

[Grup de butoane (light)](https://storybook.twenty.com/iframe.html?id=ui-input-button-buttongroup--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Grup de butoane (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-button-buttongroup--display\&viewMode=story\&globals=colorScheme:dark)

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

## Utilizare

```tsx theme={null}
import { IconCheckbox, IconNotes, IconTimelineEvent } from 'twenty-ui/icon';
import { Button, ButtonGroup } from 'twenty-ui/primitives/input';

export const ActivityActions = () => (
  <ButtonGroup aria-label="Create activity" size="sm">
    <Button startIcon={<IconNotes />}>Note</Button>
    <Button startIcon={<IconCheckbox />}>Task</Button>
    <Button startIcon={<IconTimelineEvent />}>Activity</Button>
  </ButtonGroup>
);
```

## Gestionarea stării

`ButtonGroup` coordonează aspectul, nu selecția. Nu are un mod de selecție controlat sau necontrolat. Fiecare buton primește propriul gestionar de acțiuni și propria stare a aplicației; consultați [exemplul de gestionare a stării pentru Button](https://docs.twenty.com/ro/ui/primitives/input/button.md#state-ownership) pentru comportamentul de încărcare.

Pentru o alegere reciproc exclusivă, utilizați [RadioGroup](https://docs.twenty.com/ro/ui/primitives/input/radio-group.md), care gestionează selecția pentru controalele sale radio.

## Precedența aspectului

Fiecare proprietate de aspect se rezolvă independent: proprietatea explicită a copilului, apoi valoarea implicită a grupului, apoi valoarea implicită a componentei. Acest lucru se aplică atât pentru Button, cât și pentru IconButton, inclusiv pentru un `IconButton size="xs"` explicit. Valorile implicite ajung la copii prin fragmente, învelișuri și ancore pentru tooltip.

Un grup poate furniza `color="inherit"` pe o suprafață colorată. Un element copil care se rezolvă la culoarea moștenită trebuie, de asemenea, să se rezolve la o variantă nesolidă. Suprascrierile explicite ale culorii și variantei elementului copil au prioritate, astfel încât un element copil poate alege o variantă nesolidă sau o culoare semantică atunci când grupul furnizează împreună solid și inherit.

Păstrați butoanele atașate la aceeași dimensiune, astfel încât marginile lor să fie aliniate. Acest exemplu suprascrie varianta și culoarea, moștenind în același timp dimensiunea grupului.

```tsx theme={null}
import { Button, ButtonGroup } from 'twenty-ui/primitives/input';

export const ActivityActions = () => (
  <ButtonGroup
    aria-label="Activity actions"
    variant="solid"
    color="accent"
    size="sm"
  >
    <Button variant="ghost" color="danger">
      Delete activity
    </Button>
    <Button color="neutral">Duplicate activity</Button>
    <Button>New activity</Button>
  </ButtonGroup>
);
```

**Light**

[Aspect individual într-un grup de butoane (light)](https://storybook.twenty.com/iframe.html?id=ui-input-button-buttongroup--appearance-overrides\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Aspect individual într-un grup de butoane (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-button-buttongroup--appearance-overrides\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-button-buttongroup--appearance-overrides)

## Controale detașate

Setați `attached={false}` pentru a păstra colțurile rotunjite ale fiecărui control și un spațiu de 2 px. Valorile implicite ale grupului se aplică în continuare prin intermediul wrapperelor și al ancorelor pentru indicii; proprietățile explicite ale elementelor copil au prioritate.

## Controale încadrate

Setați `framed` pentru a adăuga un fundal translucid, o bordură, spațiere interioară de 2 px și colțuri concentrice. Cadrul funcționează cu controale atașate sau detașate și păstrează aspectul explicit al elementelor copil. Utilizați `size="xs"` pentru [IconButton](https://docs.twenty.com/ro/ui/components/input/icon-button.md) pentru acțiuni compacte de 20 px.

**Light**

[Grup de butoane încadrat (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--framed-group-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Grup de butoane încadrat (dark)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--framed-group-documentation\&viewMode=story\&globals=colorScheme:dark)

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

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

export const CompactRecordActions = () => (
  <ButtonGroup framed attached={false} aria-label="Record actions">
    <IconButton size="xs" aria-label="Add" variant="ghost">
      <IconPlus />
    </IconButton>
    <IconButton size="xs" aria-label="Delete" variant="ghost" disabled>
      <IconTrash />
    </IconButton>
  </ButtonGroup>
);
```

## Actualizarea grupurilor existente

Înlocuiți `IconButtonGroup` și matricea sa `iconButtons` cu `ButtonGroup framed attached={false}` și elemente copil explicite. Înlocuiți `InsideButton` cu `LightIconButton size="xs"`. Fiecare buton își gestionează numele accesibil, gestionarul de acțiuni, starea dezactivată și indiciul opțional.

## Proprietăți

**attached** `boolean` (default: true)

Join adjacent controls. Set to false for independently rounded buttons with a 2px gap.

**color** `"accent" | "danger" | "inherit" | "neutral" | "success"`

Default semantic color for children without an explicit color. Inherited color requires each child to resolve to a non-solid variant; explicit child overrides take precedence.

**framed** `boolean` (default: false)

Add a translucent frame with padding and concentric corners. Button sizes and appearance remain independent unless set on the group.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**size** `"md" | "sm"`

Default button height for children without an explicit size.

**variant** `"ghost" | "link" | "outline" | "soft" | "solid"`

Default surface treatment for children without an explicit variant.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.