CardBadge
Single metadata badge component for set, number, rarity, condition, foil, language, and type labels.
import { CardBadge } from "@cardspark/ui/core"; const card = { set: "Scarlet & Violet 151", setCode: "MEW", series: "Scarlet & Violet"}; export function CardBadgeDemo() { return <CardBadge type="set" card={card} display="full" />;}Installation
Install the package.
npm install @cardspark/uiImport the shared stylesheet layer near your app root.
import "@cardspark/ui/tokens.css";import "@cardspark/ui/themes/basement.css";import "@cardspark/ui/styles.css";Import and render CardBadge from its package entry point.
Usage
import { CardBadge } from "@cardspark/ui/core"; const card = { set: "Scarlet & Violet 151", setCode: "MEW", series: "Scarlet & Violet"}; export function CardBadgeDemo() { return <CardBadge type="set" card={card} display="full" />;}Composition
Use CardBadge inside CardBadgeStack, CardRow metadata, CardTile footers, or detail headers.
CardBadgeStack└── CardBadge ├── type ├── card └── display / tooltip behaviorPass a shared card object whenever a surface renders multiple metadata fields.
Features
- Uses
typeto render set, number, rarity, condition, foil, or language metadata from one component. - Can read the shared
cardobject so rows, tiles, and detail headers do not remap fields for each badge. - Keeps
displayandtooltipoptions aligned with the specialized badge APIs.
Examples
Set
Use `type="set"` to show a set code or set label from card metadata.
import { CardBadge } from "@cardspark/ui/core"; const card = { set: "Scarlet & Violet 151", setCode: "MEW", series: "Scarlet & Violet"}; export function CardBadgeSetDemo() { return <CardBadge type="set" card={card} showSeries={false} />;}Number
Use `type="number"` for collector numbers and secret-rare numbering.
import { CardBadge } from "@cardspark/ui/core"; const card = { number: "173/165"}; export function NumberBadgeDemo() { return <CardBadge type="number" card={card} />;}Rarity
Use `type="rarity"` with `display="mark-code"` when the rarity mark and compact code should travel together.
import { CardBadge } from "@cardspark/ui/core"; const card = { rarity: "Illustration Rare"}; export function RarityBadgeDemo() { return <CardBadge type="rarity" card={card} display="mark-code" />;}Condition
Use `type="condition"` to normalize condition labels into compact trading-card copy.
import { CardBadge } from "@cardspark/ui/core"; const card = { condition: "Lightly Played"}; export function ConditionBadgeDemo() { return <CardBadge type="condition" card={card} />;}Foil
Use `type="foil"` for finish metadata such as reverse holofoil and short finish codes.
import { CardBadge } from "@cardspark/ui/core"; const card = { finish: "Reverse Holofoil", finishCode: "RH"}; export function FoilBadgeDemo() { return <CardBadge type="foil" card={card} />;}Language
Use `type="language"` with `display="label"` when the language should read as a full label.
import { CardBadge } from "@cardspark/ui/core"; const card = { language: "Japanese"}; export function LanguageBadgeDemo() { return <CardBadge type="language" card={card} display="label" />;}Type
Use `type="type"` with a direct value for Pokemon type metadata.
import { CardBadge } from "@cardspark/ui/core"; export function TypeBadgeDemo() { return <CardBadge type="type" value="Psychic" />;}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
type | "set" | "number" | "rarity" | "condition" | "foil" | "language" | "type" | - | Metadata field to render from the card object or direct props. |
card | CardBadgeCard | - | Shared card metadata object. Supports set, setCode, number, rarity, condition, finish, finishCode, language, series, type, and types. |
value | string | - | Direct value for `type="type"` when not passing a card object. |
display | string | - | Display mode for the selected badge type, such as compact, full, code, mark-code, mark-label, label, or code-label. |
tooltip | boolean | true | Controls whether compact metadata renders a tooltip. |