ButtonGroup

Agrupador de disposición para botones Neural nativos proyectados, sin gestionar selección.

Categoría: Acciones
Import: @neural-ui/core/button-group
Selector: neu-button-group

import { NeuButtonGroupComponent } from '@neural-ui/core/button-group';

Visión general

Usa ButtonGroup para disponer controles button[neu-button] relacionados. Es una superficie de disposición y agrupación accesible, no un controlador de alternancia o selección; cada hijo conserva su acción y estado.

Agrupa botones reales

Coloca los botones dentro del grupo. Cambia orientation para disponerlos en horizontal o vertical; fluid hace que el grupo ocupe su contenedor. Cada botón mantiene su propia acción.

Última acción: —

Configurador

Cambia la orientación, el ancho fluido y el nombre accesible del grupo. La vista previa y el template generado se actualizan juntos. La última opción configura el primer Button proyectado, no el grupo.

Vista previa

Última acción de un botón: —

Template generado. La pestaña Código incluye los imports y el estado.

<neu-button-group
  orientation="horizontal"
  [fluid]="false"
  ariaLabel="Acciones del documento"
>
  <button
    neu-button
    (neuClick)="save()"
  >
    Guardar
  </button>
  <button
    neu-button
    variant="outline"
    (neuClick)="preview()"
  >
    Vista previa
  </button>
</neu-button-group>

fluid

ariaLabel

Usar ariaLabelledBy

Deshabilitar el primer botón

ButtonGroup controla la disposición y el nombre accesible del grupo. Cada botón proyectado tiene sus propios inputs y evento neuClick.

Accesibilidad y teclado

Core proporciona un grupo y conecta ariaLabel o ariaLabelledBy. Cada Button mantiene el comportamiento nativo de teclado; no es una barra de herramientas ni un grupo de opciones excluyentes.

Tu aplicación proporciona el nombre del grupo cuando aporta contexto y etiquetas claras para todas las acciones.

Tecla	Acción
`Tab`	Recorre los botones nativos proyectados según el orden del documento.
`Enter / Space`	Activa el botón hijo enfocado; el grupo no añade un modelo de flechas.

API

Los cuatro inputs configuran la disposición y el nombre accesible del grupo. ButtonGroup no tiene modelo de valor ni outputs: gestiona las acciones en los Buttons proyectados y utiliza un componente de selección cuando la interacción edite un valor seleccionado.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`ariaLabel`	`string`	`''`	`[ariaLabel]`	Nombre accesible del contenedor renderizado con role=group.
`ariaLabelledBy`	`string`	`''`	`[ariaLabelledBy]`	ID de un elemento externo que da nombre al grupo.
`fluid`	`boolean`	`false`	`[fluid]`	Hace que los botones proyectados compartan el ancho disponible.
`orientation`	`NeuButtonGroupOrientation`	`'horizontal'`	`[orientation]`	Dispone los hijos horizontal o verticalmente.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Nombre	Mecanismo	Contrato
`*` Botones del grupo	Proyección de contenido Los botones hijos mantienen sus acciones; el grupo organiza su presentación.	`<ng-content />` Contexto utilizado: `—`

Ejemplo de uso

Proyecta botones dentro del grupo. Cada botón conserva su acción y su API; ariaLabel da un nombre al conjunto. No necesitas ng-template para este contenido.

Última acción: —

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuButtonGroupOrientationTypeScript

import type { NeuButtonGroupOrientation } from '@neural-ui/core/button-group';

// Declaración pública (solo referencia)
export type NeuButtonGroupOrientation = 'horizontal' | 'vertical';

Tematización

ButtonGroup compone los estilos de los Button proyectados y no tiene un token público --neu-button-group-* propio. Personaliza los hijos con tokens de Button y utiliza un preset global para los colores compartidos.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-radius`	Radio de las esquinas del control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`8px`