FeedbackDisponible

Reward Sticker

Sticker de juego inclinado para una recompensa confirmada: título, combo, puntos y nota.

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/reward-sticker.json

Uso

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

tsx

import { RewardSticker } from "@/components/ui/reward-sticker";
export default function Demo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-8 p-6">
      <RewardSticker title="Nice" combo={1} points={100} />
      <RewardSticker tone="sky" title="Great" combo={2} points={120} bonus={20} />
      <RewardSticker tone="purple" title="Amazing" combo={3} points={140} bonus={40} milestone />
      <RewardSticker tone="yellow" title="Brilliant" combo={5} points={180} bonus={80} />
      <RewardSticker tone="error" title="Try again" caption="Combo reset; your points stay" />
    </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
title / tone	string / mint \| sky \| purple \| yellow \| error	mint	Pastel tones for rewards; error for a reset.
combo / points / bonus / caption	number / number / number / string	0	Values come from the consumer; the sticker never awards points.
milestone / exiting / labels	boolean / boolean / object	false	Spark for milestones, exit motion and localized point labels.

Accesibilidad

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

Oculto para tecnologías de asistencia por defecto; anuncia la misma recompensa en una región viva educada.

El texto tinta sobre pasteles y el par de error cumplen WCAG AA en ambos temas; el movimiento se detiene con movimiento reducido.