Todos los componentes (204)

Grupo de botones

Acciones · ButtonGroup

Qué es y cuándo usarlo

Varios botones pegados que son UN bloque de acciones: «Guardar» y «Guardar y cerrar», «Anterior» y «Siguiente».

Cuándo usarlo

Cuando cada botón es una acción que se ejecuta y no queda marcada.
size en el grupo da el tamaño a todos los botones que no digan el suyo.

Cuándo no

Si lo que hay es un «una de estas» y el grupo tiene estado, es SegmentedGroup. Se parece mucho y hace otra cosa.
Si son dos mitades de la MISMA acción (hacer, o desplegar sus variantes), SplitButton.
Si son muchos mandos de una barra, Toolbar: allí la navegación pasa a flechas, que aquí sería un estorbo.

Teclado: Tab llega a cada botón, como a cualquier botón suelto. Lleva role="group" y no toolbar justo por eso.

Accesibilidad: label es obligatoria — sin ella el lector nombra los botones sueltos y se pierde que van juntos. Al posar el ratón o enfocar, el botón sube por encima de sus vecinos: si no, el borde del de al lado tapa medio anillo de foco y no se sabe dónde está.

Aspecto fino: hereda el del botón (--amset-button-*). El pegado se hace quitando el radio interior y solapando un borde, no con gap: 0, que dejaría la raya del medio del doble de gruesa.

Cómo se ve

<ButtonGroup label="Acciones del pedido">
  <Button>Guardar</Button>
  <Button>Guardar y cerrar</Button>
  <Button>Descartar</Button>
</ButtonGroup>
<ButtonGroup label="Semana del calendario" size="sm" detached>
  <Button>Anterior</Button>
  <Button>Hoy</Button>
  <Button>Siguiente</Button>
</ButtonGroup>

Props

Se importa con import { ButtonGroup } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	Los botones, en el orden en que se ven.
`label`obligatoria	`string`	Como se llama el grupo: «Acciones del pedido». Sin el, el lector de pantalla nombra los botones sueltos y se pierde que van juntos.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`detached`	`boolean`	Separados en vez de pegados, manteniendo el grupo.
`fullWidth`	`boolean`	—
`orientation`	`"horizontal" \| "vertical"`	—
`size`	`"sm" \| "md" \| "lg"`	El tamano de todos los botones del grupo que no dicen el suyo: se escribe una vez en vez de en cada boton. Uno que lleve su propio `size` lo conserva.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: