PatternDisponible

Popover

Panel anclado para una tarea interactiva breve.

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/popover.json

Uso

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

tsx

'use client';

import {
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverHeader,
  PopoverTitle,
  PopoverDescription,
} from '@/components/ui/popover';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';

export default function Demo() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline" />}>
        View settings
      </PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>
          <PopoverTitle>View settings</PopoverTitle>
          <PopoverDescription>
            Adjust the name used in this example.
          </PopoverDescription>
        </PopoverHeader>
        <div className="mt-4 grid gap-2">
          <Label htmlFor="view-name">Name</Label>
          <Input id="view-name" defaultValue="All components" />
        </div>
      </PopoverContent>
    </Popover>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Comprueba cerrado, abierto, opción resaltada, seleccionado y deshabilitado cuando el componente los admita.
Los diálogos y menús deben poder abrirse con teclado. Escape cierra los overlays no persistentes y devuelve el foco al disparador. Tooltip y Hover Card también deben mostrarse al enfocar.
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
PopoverContent.side	top / bottom / left / right	bottom	Preferred placement.
PopoverContent.align	start / center / end	center	Alignment to the trigger.

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.