Button group

Acciones hermanas o un rango de tiempo. Si es selección única, usá Toggle group.

Primitiva de la galería sin uso directo en la app actual. Junta botones hermanos en una sola pieza: bordes compartidos y esquinas redondeadas solo en los extremos. Si el usuario elige una sola opción, preferí Toggle group.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/button-group.json

import

import { ButtonGroup } from "@moodinary/ui/components/button-group";
import { Button } from "@moodinary/ui/components/button";

Ejemplos

Acciones hermanas

Formatos de exportación en un mismo grupo. El botón de ícono lleva aria-label.

Código

actions.tsx

import { Button } from "@moodinary/ui/components/button";
import { ButtonGroup } from "@moodinary/ui/components/button-group";
import { ChevronDownIcon } from "@moodinary/ui/components/icons";

export default function ButtonGroupActions() {
	return (
		<ButtonGroup aria-label="Exportar">
			<Button variant="secondary">CSV</Button>
			<Button variant="secondary">PDF</Button>
			<Button aria-label="Más formatos" size="icon" variant="secondary">
				<ChevronDownIcon />
			</Button>
		</ButtonGroup>
	);
}

Rango de tiempo

Con aria-pressed, la opción activa toma el fondo suave del color de la organización.

Código

period.tsx

import { Button } from "@moodinary/ui/components/button";
import { ButtonGroup } from "@moodinary/ui/components/button-group";
import { useState } from "react";

const periods = ["7 d", "30 d", "Trimestre"];

export default function ButtonGroupPeriod() {
	const [period, setPeriod] = useState("30 d");
	return (
		<ButtonGroup aria-label="Período">
			{periods.map((item) => (
				<Button
					aria-pressed={period === item}
					key={item}
					onClick={() => setPeriod(item)}
					size="sm"
					variant="secondary"
				>
					{item}
				</Button>
			))}
		</ButtonGroup>
	);
}

Props

ButtonGroup

Prop	Tipo	Default	Descripción
children	ReactNode	-	Botones del grupo, normalmente secondary.
aria-label	string	-	Nombre del grupo para lectores de pantalla.
className	string	-	Clases extra.

Cuándo sí y cuándo no

Hacé

Agrupá dos a cuatro acciones del mismo tipo.
Usá el mismo tamaño y variante en todo el grupo.
Poné un nombre al grupo con aria-label.

Evitá

No mezcles primary con secondary.
No lo uses para navegación principal.
No metas acciones destructivas en el mismo grupo.

El contenedor tiene role="group".
Cada botón se alcanza con Tab y se activa con Enter o Espacio.
Las opciones seleccionadas exponen aria-pressed.