Badge

Short status and metadata labels, set in mono capitals.

BadgeSecondaryDestructiveOutline

Zynactra

Zynactra adds the brand, success and warning variants.

Usage

import { Badge } from "@zynactra/ui/badge"

<Badge variant="default | outline | secondary | destructive">Badge</Badge>

OwnerDraftv2.4.0NewLivePendingFailed

brand marks something new or in progress, sparingly.
success, warning and destructive are status. Pair them with a dot or an icon when color is the only cue.
Keep badge text to one or two words.

Avatar

A person or team, as an image with initials as the fallback.

Breadcrumb

Where the current page sits in the hierarchy, with a link back to each level.