ButtonGroup

Grupo segmentado de botones secundarios unidos, para elegir una opción entre pocas (periodos, vistas).

Cuándo usarlo

Props. items [{value, label, icon?}], value / defaultValue, onChange(value), aria-label. El elegido lleva aria-pressed y fondo bg-secondary_hover.

Cuándo. De 2 a 5 opciones cortas que cambian lo que se ve en la misma pantalla. Para navegar entre secciones usa Tabs.

Ejemplos

Props

Prop	Tipo	Por defecto	Descripción
`items`obligatoria	`ButtonGroupItem[]`	—	De 2 a 5 opciones cortas.
`value`	`string`	—	Opción elegida (controlado).
`defaultValue`	`string`	—	Opción elegida al principio (no controlado).
`onChange`	`((value: string) => void)`	—
`aria-label`	`string`	—	Nombre del grupo para lectores de pantalla.
`className`	`string`	—

Código

import { ButtonGroup } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<ButtonGroup
				aria-label="Periodo"
				defaultValue="7d"
				items={[
					{ value: "30d", label: "30 días" },
					{ value: "7d", label: "7 días" },
					{ value: "24h", label: "24 horas", icon: "clock" },
				]}
			/>
		</>
	);
}

---
import { ButtonGroup } from "@jotis-me/react";
---

<ButtonGroup client:load
	aria-label="Periodo"
	defaultValue="7d"
	items={[
		{ value: "30d", label: "30 días" },
		{ value: "7d", label: "7 días" },
		{ value: "24h", label: "24 horas", icon: "clock" },
	]}
/>