Component

Badge

Also known as: Tag, Label, Chip

A small label, generally appearing inside or in close proximity to another larger interface component, representing a status, property, or some other metadata.

Badge

Ant Design
Tech
- React
Features
- Code examples
- Accessibility issues
- Open source
Tag

Ant Design
Tech
- React
Features
- Code examples
- Accessibility issues
- Open source
Badge

Atlassian Design System
Tech
- React
Features
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Lozenge

Atlassian Design System
Tech
- React
Features
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Tag

Atlassian Design System
Tech
- React
Features
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Badge

Auro
Tech
- Web Components
- Sass
Features
- Code examples
- Usage guidelines
- Open source
Badge

Aurora
Tech
- CSS
Features
- Code examples
- Tone of voice
- Open source
- Unmaintained
Badge

Backpack
Tech
- Mobile
- React
Features
- Code examples
- Usage guidelines
- Open source
- Tone of voice
Chip

Backpack
Tech
- Mobile
- React
Features
- Code examples
- Usage guidelines
- Open source
- Tone of voice
Tag

Base Web
Tech
- React
- CSS-in-JS
Features
- Code examples
- Usage guidelines
- Open source
Badge

Base Web
Tech
- React
- CSS-in-JS
Features
- Code examples
- Usage guidelines
- Open source
Tag

Blueprint
Tech
- React
- Sass
Features
- Open source
Compound tag

Blueprint
Tech
- React
- Sass
Features
- Open source
Chip

Bolt Design System
Tech
- Sass
- Twig
- Web Components
Features
- Code examples
- Tone of voice
- Open source
Badge

Bootstrap
Tech
- Sass
Features
- Code examples
- Accessibility
- Open source
Tag

Bulma
Tech
- Sass
Features
- Code examples
- Accessibility issues
- Open source
Tag

Carbon Design System
Tech
- React
- Vanilla JS
- Angular
- Vue
- Svelte
- Web Components
Features
- Code examples
- Usage guidelines
- Open source
Badge

Cauldron
Tech
- React
- CSS
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
ImpactBadge

Cauldron
Tech
- React
- CSS
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
Tag

Cauldron
Tech
- React
- CSS
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
Badge

Chakra UI
Tech
- React
- CSS-in-JS
Features
- Code examples
- Open source
Tag

Chakra UI
Tech
- React
- CSS-in-JS
Features
- Code examples
- Open source
Status

Chakra UI
Tech
- React
- CSS-in-JS
Features
- Code examples
- Open source
Badge

Clarity Design System
Tech
- CSS
- Angular
- Web Components
Features
- Code examples
- Usage guidelines
- Open source
Label

Clarity Design System
Tech
- CSS
- Angular
- Web Components
Features
- Code examples
- Usage guidelines
- Open source
Tag

Coral
Tech
- React
Features
- Code examples
- Tone of voice
- Open source
Badge

Coral
Tech
- React
Features
- Code examples
- Tone of voice
- Open source
Status

Coral
Tech
- React
Features
- Code examples
- Tone of voice
- Open source
Label

Crayons
Tech
- Web Components
Features
- Code examples
- Open source
Tag

Crayons
Tech
- Web Components
Features
- Code examples
- Open source
Pill

Crayons
Tech
- Web Components
Features
- Code examples
- Open source
Badge

Decathlon Design System
Tech
- CSS
- React
- Svelte
- Vue
- Web Components
Features
- Usage guidelines
- Code examples
- Accessibility
- Open source
Tag

Decathlon Design System
Tech
- CSS
- React
- Svelte
- Vue
- Web Components
Features
- Usage guidelines
- Code examples
- Accessibility
- Open source
Badge

Dell Design System
Tech
- Vanilla JS
Features
- Code examples
- Usage guidelines
Tag

Dell Design System
Tech
- Vanilla JS
Features
- Code examples
- Usage guidelines
Badge

eBay Playbook
Tech
- HTML
- React
Features
- Code examples
Signal

eBay Playbook
Tech
- HTML
- React
Features
- Code examples
Badge

Elastic UI framework
Tech
- React
- Sass
Features
- Code examples
- Open source
Badge

Elisa Design System
Tech
- React
Features
- Usage guidelines
- Code examples
- Accessibility
Badge & Pill

Evergreen
Tech
- React
Features
- Open source
Badge

Flowbite
Tech
- Tailwind CSS
Features
- Open source
- Code examples
Badge

Forma 36
Tech
- React
- CSS-in-JS
Features
- Code examples
- Open source
Entity status badge

Forma 36
Tech
- React
- CSS-in-JS
Features
- Code examples
- Open source
Badge

Geist Design System
Tech
- React
Features
- Code examples
Badge

Gestalt
Tech
- React
- CSS
Features
- Code examples
- Open source
- Usage guidelines
Tag

Gestalt
Tech
- React
- CSS
Features
- Code examples
- Open source
- Usage guidelines
Tag

GOLD Design System
Tech
- React
- Sass
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
- Unmaintained
Tag

GOV.UK Design System
Tech
- Nunjucks
Features
- Code examples
- Usage guidelines
- Research
- Open source
Badge

Helios
Tech
- Ember
- Sass
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
Badge count

Helios
Tech
- Ember
- Sass
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
Tag

Helios
Tech
- Ember
- Sass
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
Status label

Helsinki Design System
Tech
- React
- CSS
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
Tag

Helsinki Design System
Tech
- React
- CSS
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
Badge

Instructure-UI
Tech
- React
- CSS-in-JS
Features
- Code examples
- Accessibility
- Open source
Pill

Instructure-UI
Tech
- React
- CSS-in-JS
Features
- Code examples
- Accessibility
- Open source
Tag

Instructure-UI
Tech
- React
- CSS-in-JS
Features
- Code examples
- Accessibility
- Open source
Tag

Jøkul Designsystem
Tech
- React
- Sass
Features
- Code examples
- Usage guidelines
- Open source
Badge

Lightning Design System
Tech
- React
Features
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Badge

Lightning Design System
Tech
- React
Features
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Pill

Lightning Design System
Tech
- React
Features
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Badge

Material Design
Tech
- Mobile
- Web Components
- Sass
Features
- Usage guidelines
- Open source
- Accessibility
Badge

Momentum Design
Tech
- React
- Web Components
Features
- Usage guidelines
- Open source
Chip

Momentum Design
Tech
- React
- Web Components
Features
- Usage guidelines
- Open source
Inline message

Morningstar Design System
Tech
- Vue
Features
- Usage guidelines
Tag

Morningstar Design System
Tech
- Vue
Features
- Usage guidelines
Badge

Nessie
Tech
- Web Components
- Tailwind CSS
Features
- Usage guidelines
- Code examples
Sticker

Nessie
Tech
- Web Components
- Tailwind CSS
Features
- Usage guidelines
- Code examples
Tag

NewsKit
Tech
- React
- CSS-in-JS
Features
- Code examples
- Usage guidelines
- Open source
Flag

NewsKit
Tech
- React
- CSS-in-JS
Features
- Code examples
- Usage guidelines
- Open source
Tag

NHS Digital service manual
Tech
- Nunjucks
Features
- Code examples
- Usage guidelines
- Research
- Tone of voice
- Open source
Badge

Nord Design System
Tech
- Web Components
Features
- Code examples
- Usage guidelines
Pill

Nucleus Design System
Tech
- Web Components
Features
- Usage guidelines
Badge

Orbit
Tech
- React
- CSS-in-JS
Features
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Notification badge

Orbit
Tech
- React
- CSS-in-JS
Features
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Tag

Orbit
Tech
- React
- CSS-in-JS
Features
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Badge

Pajamas
Tech
- Vue
Features
- Usage guidelines
- Code examples
- Open source
Label

Pajamas
Tech
- Vue
Features
- Usage guidelines
- Code examples
- Open source
Badge

PatternFly
Tech
- React
- Sass
Features
- Tone of voice
- Open source
- Usage guidelines
Label

PatternFly
Tech
- React
- Sass
Features
- Tone of voice
- Open source
- Usage guidelines
Notification badge

PatternFly
Tech
- React
- Sass
Features
- Tone of voice
- Open source
- Usage guidelines
Tag

Polaris
Tech
- React
Features
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Badge

Polaris
Tech
- React
Features
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Tag

Porsche Design System
Tech
- Web Components
- Angular
- React
- Vue
Features
- Code examples
- Open source
Tag Dismissible

Porsche Design System
Tech
- Web Components
- Angular
- React
- Vue
Features
- Code examples
- Open source
Circle badge

Primer
Tech
- React
Features
- Code examples
- Open source
Counter label

Primer
Tech
- React
Features
- Code examples
- Open source
Label

Primer
Tech
- React
Features
- Code examples
- Open source
State label

Primer
Tech
- React
Features
- Code examples
- Open source
Token

Primer
Tech
- React
Features
- Code examples
- Open source
Badge

Purple3
Tech
- CSS
Features
- Code examples
- Unmaintained
Badge

Quasar Framework
Tech
- Vue
Features
- Accessibility issues
- Code examples
- Open source
Chip

Quasar Framework
Tech
- Vue
Features
- Accessibility issues
- Code examples
- Open source
Bullet Badge

Ruter Components
Tech
- React
Features
- Code examples
- Unmaintained
Status Badge

Ruter Components
Tech
- React
Features
- Code examples
- Unmaintained
Counter Badge

Ruter Components
Tech
- React
Features
- Code examples
- Unmaintained
Badge

Seeds
Tech
- React
Features
- Code examples
- Usage guidelines
- Tone of voice
Pill

Seek style guide
Tech
- React
Features
- Code examples
- Unmaintained
Badge

Seek style guide
Tech
- React
Features
- Code examples
- Unmaintained
Badge

shadcn/ui
Tech
- React
- Tailwind CSS
Features
- Code examples
- Open source
Badge

Shoelace
Tech
- Web Components
Features
- Code examples
- Open source
Tag

Shoelace
Tech
- Web Components
Features
- Code examples
- Open source
Tag

Spectrum
Tech
- CSS
- Web Components
- React
Features
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Badge

Spectrum
Tech
- CSS
- Web Components
- React
Features
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Badge

Stacks
Tech
- Stimulus
Features
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Tag

Stacks
Tech
- Stimulus
Features
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Pill

Thumbprint
Tech
- React
- Sass
Features
- Code examples
- Open source
Tag

United States Web Design System
Tech
- Nunjucks
Features
- Code examples
- Usage guidelines
- Open source
Badge

Visa Product Design System
Tech
- Angular
- React
- CSS
- Mobile
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
Chips

Visa Product Design System
Tech
- Angular
- React
- CSS
- Mobile
Features
- Code examples
- Usage guidelines
- Accessibility
- Open source
Chip

Wanda
Tech
- React
- CSS Modules
Features
- Code examples
- Open source
Status Indicator

Workday Canvas Design System
Tech
- React
Features
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Pill

Workday Canvas Design System
Tech
- React
Features
- Usage guidelines
- Accessibility
- Tone of voice
- Open source