Soft Badge

Lightweight status badges with contrast-safe background/text pairs. Variants: error (red-50/red-700), success (primary-light/primary), warning (amber-50/amber-800), info (blue-50/blue-700). All meet WCAG AA 4.5:1 contrast.

Install

npx shadcn add a11y/soft-badge

npm Dependencies

class-variance-authority
radix-ui

Registry Dependencies

a11y/utils

Files

componentregistry/a11y/soft-badge/soft-badge.tsx

Preview & Source

ErrorPassedWarningInfo