FeedbackAvailable

Reward Sticker

Tilted game sticker for a confirmed reward: title, combo, points and caption.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/reward-sticker.json

Usage

Import the component into your project and keep the source code under your 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>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
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.

Accessibility

Rules that should remain intact when adapting the component to a product.

Hidden from assistive technology by default; announce the same reward in a polite live region.

Ink text on pastel tones and the error pair meet WCAG AA in both themes; motion stops with reduced motion.