A small label, generally appearing inside or in close proximity to another larger interface component, representing a status, property, or some other metadata.
Component
Badge
Other names: Tag, Label, Chip
117 examples
Badge
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
Tag
Ant Design
Ant Financial
- React
- Code examples
- Accessibility issues
Badge
Atlassian Design System
- React
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Lozenge
Atlassian Design System
- React
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Tag
Atlassian Design System
- React
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Badge
Auro
Alaska Airlines
- Web Components
- Sass
- Code examples
- Usage guidelines
- Open source
Badge
Aurora
Government of Canada
- CSS
- Code examples
- Tone of voice
- Open source
- Unmaintained
Badge
Backpack
Skyscanner
- Mobile
- React
- Code examples
- Usage guidelines
- Open source
- Tone of voice
Chip
Backpack
Skyscanner
- Mobile
- React
- Code examples
- Usage guidelines
- Open source
- Tone of voice
Tag
Base Web
Uber
- React
- CSS-in-JS
- Code examples
- Usage guidelines
- Open source
Badge
Base Web
Uber
- React
- CSS-in-JS
- Code examples
- Usage guidelines
- Open source
Chip
Bolt Design System
Pegasystems
- Sass
- Twig
- Web Components
- Code examples
- Tone of voice
- Open source
Badge
Bootstrap
- Sass
- Code examples
- Accessibility
- Open source
Tag
Bulma
- Sass
- Code examples
- Accessibility issues
- Open source
Tag
Carbon Design System
IBM
- React
- Vanilla JS
- Angular
- Vue
- Svelte
- Web Components
- Code examples
- Usage guidelines
- Open source
Badge
Cauldron
Deque
- jQuery
- Code examples
- Usage guidelines
- Accessibility
- Open source
Badge
Chakra UI
- React
- CSS-in-JS
- Accessibility
- Code examples
- Open source
Tag
Chakra UI
- React
- CSS-in-JS
- Accessibility
- Code examples
- Open source
Badge
Clarity Design System
VMware
- CSS
- Angular
- Web Components
- Code examples
- Usage guidelines
- Open source
Label
Clarity Design System
VMware
- CSS
- Angular
- Web Components
- Code examples
- Usage guidelines
- Open source
Tag
Coral
Talend
- React
- Code examples
- Tone of voice
- Open source
Badge
Coral
Talend
- React
- Code examples
- Tone of voice
- Open source
Status
Coral
Talend
- React
- Code examples
- Tone of voice
- Open source
Tag
Crayons
Freshworks
- Web Components
- Code examples
- Open source
Label
Crayons
Freshworks
- Web Components
- Code examples
- Open source
Pill
Crayons
Freshworks
- Web Components
- Code examples
- Open source
Badge
Decathlon Design System
- CSS
- React
- Svelte
- Vue
- Web Components
- Usage guidelines
- Code examples
- Accessibility
- Open source
Tag
Decathlon Design System
- CSS
- React
- Svelte
- Vue
- Web Components
- Usage guidelines
- Code examples
- Accessibility
- Open source
Badge
Dell Design System
- Vanilla JS
- Code examples
- Usage guidelines
Tag
Dell Design System
- Vanilla JS
- Code examples
- Usage guidelines
Badge
Edison Design System
General Electric
- Web Components
- Usage guidelines
- Code examples
Filter tag
Edison Design System
General Electric
- Web Components
- Usage guidelines
- Code examples
Badge
Elastic UI framework
Elastic
- React
- Sass
- Code examples
- Open source
Badge
Elisa Design System
- React
- Usage guidelines
- Code examples
- Accessibility
Badge & Pill
Evergreen
Segment
- React
- Open source
Badge
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
Entity status badge
Forma 36
Contentful
- React
- CSS-in-JS
- Code examples
- Open source
Badge
FutureLearn design system
FutureLearn
- React
- Usage guidelines
- Tone of voice
Flag
FutureLearn design system
FutureLearn
- React
- Usage guidelines
- Tone of voice
Stamp
FutureLearn design system
FutureLearn
- React
- Usage guidelines
- Tone of voice
Step number
FutureLearn design system
FutureLearn
- React
- Usage guidelines
- Tone of voice
Badge
Gestalt
Pinterest
- React
- CSS
- Code examples
- Open source
Tag
GOLD Design System
Design System AU
- React
- Sass
- Code examples
- Usage guidelines
- Accessibility
- Open source
- Unmaintained
Badge
Goldman Sachs Design System
- Tone of voice
- Usage guidelines
Tag
Goldman Sachs Design System
- Tone of voice
- Usage guidelines
Tag
GOV.UK Design System
- Nunjucks
- Code examples
- Usage guidelines
- Research
- Open source
Badge
Helios
Hashicorp
- Ember
- Sass
- Code examples
- Usage guidelines
- Accessibility
Badge count
Helios
Hashicorp
- Ember
- Sass
- Code examples
- Usage guidelines
- Accessibility
Tag
Helios
Hashicorp
- Ember
- Sass
- Code examples
- Usage guidelines
- Accessibility
Status label
Helsinki Design System
City of Helsinki
- React
- CSS
- Code examples
- Usage guidelines
- Accessibility
- Open source
Tag
Helsinki Design System
City of Helsinki
- React
- CSS
- Code examples
- Usage guidelines
- Accessibility
- Open source
Badge
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
Pill
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
Tag
Instructure-UI
Instructure
- React
- CSS-in-JS
- Code examples
- Accessibility
- Open source
Tag
Jøkul Designsystem
Fremtind Forsikring
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Badge
Lightning Design System
Salesforce
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Badge
Lightning Design System
Salesforce
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Pill
Lightning Design System
Salesforce
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Badge
Material Design
Google
- Mobile
- Web Components
- Sass
- Usage guidelines
- Open source
- Accessibility
Badge
Momentum Design
Cisco
- React
- Sass
- Code examples
- Usage guidelines
- Open source
Tag
NewsKit
News Corp
- React
- Code examples
- Usage guidelines
- Open source
Flag
NewsKit
News Corp
- React
- Code examples
- Usage guidelines
- Open source
Tag
NHS Digital service manual
- Nunjucks
- Code examples
- Usage guidelines
- Research
- Tone of voice
- Open source
Badge
Nord Design System
Nordhealth
- Web Components
- Code examples
- Usage guidelines
Pill
Nucleus Design System
British Gas
- Web Components
- Usage guidelines
Badge
Orbit
Kiwi.com
- React
- CSS-in-JS
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Notification badge
Orbit
Kiwi.com
- React
- CSS-in-JS
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Tag
Orbit
Kiwi.com
- React
- CSS-in-JS
- Usage guidelines
- Open source
- Code examples
- Tone of voice
Badge
Pajamas
GitLab
- Vue
- Usage guidelines
- Code examples
- Open source
Label
Pajamas
GitLab
- Vue
- Usage guidelines
- Code examples
- Open source
Tag
Polaris
Shopify
- React
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Badge
Polaris
Shopify
- React
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Tag
Porsche Design System
- Web Components
- Angular
- React
- Vue
- Code examples
- Open source
Tag Dismissible
Porsche Design System
- Web Components
- Angular
- React
- Vue
- Code examples
- Open source
Circle badge
Primer
GitHub
- React
- Code examples
- Open source
Counter label
Primer
GitHub
- React
- Code examples
- Open source
Label
Primer
GitHub
- React
- Code examples
- Open source
State label
Primer
GitHub
- React
- Code examples
- Open source
Token
Primer
GitHub
- React
- Code examples
- Open source
Badge
Purple3
Heroku
- CSS
- Code examples
- Unmaintained
Badge
Quasar Framework
- Vue
- Accessibility issues
- Code examples
- Open source
Chip
Quasar Framework
- Vue
- Accessibility issues
- Code examples
- Open source
Bullet Badge
Ruter Components
- React
- Code examples
- Unmaintained
Status Badge
Ruter Components
- React
- Code examples
- Unmaintained
Counter Badge
Ruter Components
- React
- Code examples
- Unmaintained
Badge
Seeds
Sprout Social
- React
- Code examples
- Usage guidelines
- Tone of voice
Pill
Seek style guide
- React
- Code examples
- Unmaintained
Badge
Seek style guide
- React
- Code examples
- Unmaintained
Badge
shadcn/ui
- React
- Tailwind CSS
- Code examples
- Open source
Badge
Shoelace
- Web Components
- Code examples
- Open source
Tag
Shoelace
- Web Components
- Code examples
- Open source
Stamp
Solar Design System
Bulb
- Code examples
- Usage guidelines
- Research
- Tone of voice
Tag
Solid
Buzzfeed
- CSS
- Code examples
- Usage guidelines
- Accessibility issues
- Unmaintained
Tag
Spectrum
Adobe
- CSS
- Web Components
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Badge
Spectrum
Adobe
- CSS
- Web Components
- React
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Badge
Stacks
Stack Overflow
- Stimulus
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Tag
Stacks
Stack Overflow
- Stimulus
- Code examples
- Usage guidelines
- Tone of voice
- Open source
Pill
Thumbprint
Thumbtack
- React
- Sass
- Code examples
- Open source
Tag
United States Web Design System
United States government
- Nunjucks
- Code examples
- Usage guidelines
- Open source
Badge
Vattenfall Design System
- HTML
- jQuery
- Sass
- Code examples
- Open source
Badge
Vercel Design
- React
- Code examples
Tag
Vercel Design
- React
- Code examples
Chip
Wanda
Wonderflow
- React
- CSS Modules
- Code examples
- Open source
Status Indicator
Workday Canvas Design System
- React
- Usage guidelines
- Accessibility
- Tone of voice
- Open source
Pill
Workday Canvas Design System
- React
- Usage guidelines
- Accessibility
- Tone of voice
- Open source