Advancement title, original diamond icon and achievement frames.
Preview
Example source could not be loaded: badge-example. Reload this page to retry.Usage
The only supported variant is default. achievement accepts challenge, goal or task; earned defaults to true, and the original diamond is the default icon. maxWidth defaults to 170 logical pixels. Rich custom icons and wrapped titles have a narrower native claim than the retained Diamonds! reference.
Composition
Compare unearned goal and earned task frames below. Badge supports render composition for a semantic anchor; provide a real destination and accessible title. Default content-sized geometry, long titles and arbitrary icon composition do not imply native advancement-widget equality.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { cva } from "class-variance-authority";
import type { VariantProps } from "class-variance-authority";
import * as React from "react";
import { minecraftBadgeAssets } from "./minecraft-badge-assets";
import { MinecraftProse } from "./minecraft-prose";
import {
isMinecraftTextContent,
minecraftClasses as cn,
minecraftStyle,