ComponentsData Display
Badge
A small label for status, counts, or categories.
Overview
A badge is a small label for status, counts, or categories. It comes in several variants and can include an icon.
DefaultSecondaryDestructiveOutline
$ npx morpha-ui add badgeExamples
With icon
VerifiedPro
Installation
Morpha UI components are distributed via the Morpha CLI (coming in a later
step): npx morpha-ui add badge. In the meantime, since this is the base
shadcn component, you can also add it directly:
npx shadcn@latest add badgeAPI Reference
Prop
Type
Accessibility
- Don't rely on color alone to convey meaning — keep the text label explicit.
- A badge is decorative text; if it conveys live status, expose that status to assistive tech elsewhere.