FeedbackDisponible

Completion Emblem

Emblema decorativo para una lección o curso completado, con una celebración única.

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/completion-emblem.json

Uso

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

tsx

"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { CompletionEmblem } from "@/components/ui/completion-emblem";
export default function Demo() {
  const [round, setRound] = useState(0);
  return (
    <div className="grid justify-items-center gap-6 p-6">
      <div className="flex gap-10">
        <CompletionEmblem key={`check-${round}`} celebrating={round > 0} />
        <CompletionEmblem key={`trophy-${round}`} variant="trophy" celebrating={round > 0} />
      </div>
      <Button variant="outline" onClick={() => setRound(round + 1)}>Celebrate again</Button>
    </div>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
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
variant	check \| trophy	check	Lesson (mint check) or course (yellow trophy).
celebrating	boolean	false	Plays the entrance and particles once; pass false for reduced motion.

Accesibilidad

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

Es decorativo; el título de cierre y un mensaje de estado transmiten el significado.

Las partículas y el movimiento se omiten con movimiento reducido.