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

> Agrupe botones relacionados con una apariencia compartida y un marco opcional.

## Resumen

Asigna un nombre accesible a un grupo y coloca los botones relacionados dentro de él. El grupo une los bordes adyacentes y puede aplicar valores predeterminados para el tamaño, la variante y el color. Los botones conservan sus propios puntos de tabulación.

**Light**

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

**Dark**

[Grupo de botones (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)

## "Uso"

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

## Propiedad del estado

`ButtonGroup` coordina el aspecto, no la selección. No tiene un modo de selección controlado ni no controlado. Cada botón recibe su propio controlador de acciones y estado de la aplicación; consulta el [ejemplo de propiedad del estado de Button](https://docs.twenty.com/es/ui/primitives/input/button.md#state-ownership) para conocer el comportamiento de carga.

Para una elección mutuamente excluyente, usa [RadioGroup](https://docs.twenty.com/es/ui/primitives/input/radio-group.md), que gestiona la selección de sus controles de opción.

## Precedencia de apariencia

Cada propiedad de apariencia se resuelve de forma independiente: la propiedad explícita del elemento secundario, luego el valor predeterminado del grupo y, por último, el valor predeterminado del componente. Esto se aplica tanto a Button como a IconButton, incluido un `IconButton size="xs"` explícito. Los valores predeterminados llegan a los elementos secundarios a través de fragmentos, contenedores y anclajes de información sobre herramientas.

Un grupo puede proporcionar `color="inherit"` en una superficie coloreada. Un elemento secundario que se resuelve en un color heredado también debe resolverse en una variante no sólida. Las anulaciones explícitas del color y la variante de un elemento secundario tienen prioridad, por lo que un elemento secundario puede elegir una variante no sólida o un color semántico cuando el grupo proporciona una variante sólida y una heredada conjuntamente.

Mantén los botones adjuntos del mismo tamaño para que sus bordes se alineen. Este ejemplo reemplaza la variante y el color, mientras hereda el tamaño del grupo.

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

[Apariencia individual en un grupo de botones (light)](https://storybook.twenty.com/iframe.html?id=ui-input-button-buttongroup--appearance-overrides\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Apariencia individual en un grupo de botones (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)

## Controles separados

Establece `attached={false}` para conservar las esquinas redondeadas de cada control y una separación de 2 px. Los valores predeterminados del grupo siguen aplicándose mediante contenedores y anclajes de tooltip; las props explícitas de los elementos secundarios tienen prioridad.

## Controles con marco

Establece `framed` para añadir un fondo translúcido, un borde, relleno de 2 px y esquinas concéntricas. El marco funciona con controles adjuntos o separados y conserva el aspecto explícito de los elementos secundarios. Usa `size="xs"` en [IconButton](https://docs.twenty.com/es/ui/components/input/icon-button.md) para acciones compactas de 20 px.

**Light**

[Grupo de botones con marco (light)](https://storybook.twenty.com/iframe.html?id=ui-components-iconbutton--framed-group-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Grupo de botones con marco (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>
);
```

## Actualización de grupos existentes

Reemplaza `IconButtonGroup` y su matriz `iconButtons` por `ButtonGroup framed attached={false}` y elementos secundarios explícitos. Reemplaza `InsideButton` por `LightIconButton size="xs"`. Cada botón gestiona su nombre accesible, controlador de acciones, estado deshabilitado y tooltip opcional.

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