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

> Raggruppa pulsanti correlati con un aspetto condiviso e una cornice facoltativa.

## Panoramica

Assegna al gruppo un nome accessibile e inserisci al suo interno i pulsanti correlati. Il gruppo unisce i bordi adiacenti e può applicare valori predefiniti per dimensione, variante e colore. I pulsanti mantengono i propri punti di tabulazione.

**Light**

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

**Dark**

[Gruppo di pulsanti (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)

## Utilizzo

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

## Proprietà dello stato

`ButtonGroup` coordina l'aspetto, non la selezione. Non dispone di una modalità di selezione controllata o non controllata. Ogni pulsante riceve il proprio gestore di azioni e lo stato dell'applicazione; consulta [l'esempio di proprietà dello stato di Button](https://docs.twenty.com/it/ui/primitives/input/button.md#state-ownership) per il comportamento di caricamento.

Per una scelta mutuamente esclusiva, usa [RadioGroup](https://docs.twenty.com/it/ui/primitives/input/radio-group.md), che gestisce la selezione per i relativi controlli radio.

## Precedenza dell'aspetto

Ogni prop dell'aspetto viene risolta in modo indipendente: prima la prop esplicita dell'elemento figlio, poi il valore predefinito del gruppo, quindi il valore predefinito del componente. Questo si applica sia a Button sia a IconButton, incluso un `IconButton size="xs"` esplicito. I valori predefiniti raggiungono gli elementi figlio tramite frammenti, wrapper e ancore dei tooltip.

Un gruppo può fornire `color="inherit"` su una superficie colorata. Un elemento figlio che viene risolto in un colore ereditato deve essere risolto anche in una variante non uniforme. Le sostituzioni esplicite del colore e della variante dell'elemento figlio hanno la precedenza, quindi un elemento figlio può scegliere una variante non uniforme o un colore semantico quando il gruppo fornisce insieme uniforme e inherit.

Mantieni i pulsanti collegati della stessa dimensione affinché i bordi siano allineati. Questo esempio sovrascrive la variante e il colore ereditando la dimensione del gruppo.

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

[Aspetto individuale in un gruppo di pulsanti (light)](https://storybook.twenty.com/iframe.html?id=ui-input-button-buttongroup--appearance-overrides\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Aspetto individuale in un gruppo di pulsanti (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)

## Controlli separati

Imposta `attached={false}` per mantenere gli angoli arrotondati di ciascun controllo e uno spazio di 2px. I valori predefiniti del gruppo si applicano comunque tramite wrapper e ancoraggi dei tooltip; le proprietà esplicite dei figli hanno la precedenza.

## Controlli con cornice

Imposta `framed` per aggiungere uno sfondo traslucido, un bordo, un padding di 2px e angoli concentrici. La cornice funziona con controlli collegati o separati e mantiene l'aspetto esplicito dei figli. Usa `size="xs"` su [IconButton](https://docs.twenty.com/it/ui/components/input/icon-button.md) per azioni compatte da 20px.

**Light**

[Gruppo di pulsanti con cornice (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--framed-group-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Gruppo di pulsanti con cornice (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>
);
```

## Aggiornamento dei gruppi esistenti

Sostituisci `IconButtonGroup` e il relativo array `iconButtons` con `ButtonGroup framed attached={false}` e figli espliciti. Sostituisci `InsideButton` con `LightIconButton size="xs"`. Ogni pulsante dispone del proprio nome accessibile, gestore di azioni, stato disabilitato e tooltip facoltativo.

## Props

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