PrimitiveDisponible

Button Group

Acciones relacionadas con un contorno y nombre accesible compartidos.

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/button-group.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

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

export default function Demo() {
  const [alignment, setAlignment] = useState('left');
  return (
    <ButtonGroup aria-label="Text alignment">
      <Button
        variant={alignment === 'left' ? 'secondary' : 'outline'}
        aria-pressed={alignment === 'left'}
        onClick={() => setAlignment('left')}
      >
        Left
      </Button>
      <Button
        variant={alignment === 'center' ? 'secondary' : 'outline'}
        aria-pressed={alignment === 'center'}
        onClick={() => setAlignment('center')}
      >
        Center
      </Button>
      <Button
        variant={alignment === 'right' ? 'secondary' : 'outline'}
        aria-pressed={alignment === 'right'}
        onClick={() => setAlignment('right')}
      >
        Right
      </Button>
    </ButtonGroup>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Primario, secundario, accent, outline y destructivo: sombra de 4px; hover desplaza 2px y deja 2px de sombra; pulsado desplaza 4px y elimina la sombra.
Ghost cambia la superficie al pasar el cursor; link se subraya. Disabled bloquea la activación. Loading también bloquea la acción y anuncia aria-busy.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
orientation	horizontal / vertical	horizontal	Direction of the group.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.