Cephalopod

Badge

Small status descriptors for UI elements.

Base Variants

DefaultSecondaryOutlineDestructive

Status Badges

ActivePendingFailedProcessingOffline

Tags

ReactTypeScriptTailwindNext.js

Usage

Code Example
import { Badge } from "cephalopod-design-system"
import { StatusBadge, Tag } from "cephalopod-design-system"

// Base Badge
<Badge variant="outline">Outline</Badge>

// Status Badge
<StatusBadge status="success">Active</StatusBadge>

// Tag
<Tag>Next.js</Tag>