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
64 examples
Badge
Ant Design
Ant Financial
- Code examples
- Accessibility issues
Tag
Ant Design
Ant Financial
- Code examples
- Accessibility issues
Badge
Atlassian Design System
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Lozenge
Atlassian Design System
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Tag
Atlassian Design System
- Code examples
- Usage guidelines
- Tone of voice
- Accessibility
Badge
Aurora
Government of Canada
- Code examples
- Tone of voice
Tag
Australian Government Design System
- Usage guidelines
- Code examples
- Accessibility
Tag
Base Web
Uber
- Code examples
- Usage guidelines
Chip
Bolt Design System
- Tone of voice
- Code examples
Badge
Bootstrap
- Accessibility
- Code examples
Tag
Bulma
- Code examples
- Accessibility issues
Tag
Carbon Design System
IBM
- Code examples
- Usage guidelines
Tag
Carbon Design System
IBM
- Code examples
- Usage guidelines
Badge
Cauldron
Deque
- Code examples
- Usage guidelines
- Accessibility
Badge
Chakra UI
- Accessibility
- Code examples
Tag
Chakra UI
- Accessibility
- Code examples
Badge
Clarity Design System
VMware
- Code examples
- Usage guidelines
Label
Clarity Design System
VMware
- Code examples
- Usage guidelines
Badge
Edison Design System
General Electric
- Usage guidelines
- Code examples
Filter tag
Edison Design System
General Electric
- Usage guidelines
- Code examples
Badge
Elastic UI framework
Elastic
- Code examples
Badge & Pill
Evergreen
Segment
Badge
FutureLearn design system
FutureLearn
- Usage guidelines
- Tone of voice
Flag
FutureLearn design system
FutureLearn
- Usage guidelines
- Tone of voice
Stamp
FutureLearn design system
FutureLearn
- Usage guidelines
- Tone of voice
Step number
FutureLearn design system
FutureLearn
- Usage guidelines
- Tone of voice
Badge
Gestalt
Pinterest
- Code examples
Tag
GOV.UK Design System
- Code examples
- Usage guidelines
- Research
Tag
ICS Design System
IBM Collaboration Solutions
- Usage guidelines
- Accessibility
- Tone of voice
Badge
Lightning Design System
Salesforce
- Code examples
- Usage guidelines
- Tone of voice
Badge
Lightning Design System
Salesforce
- Code examples
- Usage guidelines
- Tone of voice
Pill
Lightning Design System
Salesforce
- Code examples
- Usage guidelines
- Tone of voice
Badge
Momentum Design
Cisco
- Code examples
- Usage guidelines
Tag
Polaris
Shopify
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
Badge
Polaris
Shopify
- Code examples
- Usage guidelines
- Accessibility
- Tone of voice
Label
Primer
GitHub
- Code examples
Badge
Purple3
Heroku
- Code examples
Badge
Radix
Modulz
- Code examples
Badge
Rizzo
Lonely Planet
Tag
Rizzo
Lonely Planet
Price Label
Rizzo
Lonely Planet
Price Tags
Rizzo
Lonely Planet
Badge
Royal Navy design system
- Usage guidelines
- Code examples
Bullet Badge
Ruter Components
- Code examples
Status Badge
Ruter Components
- Code examples
Counter Badge
Ruter Components
- Code examples
Badge
Seeds
Sprout Social
- Code examples
- Usage guidelines
- Tone of voice
Pill
Seek style guide
- Code examples
Badge
Seek style guide
- Code examples
Badge
Shoelace
- Code examples
Tag
Shoelace
- Code examples
Stamp
Solar Design System
Bulb
- Code examples
- Usage guidelines
- Research
- Tone of voice
Tag
Solid
Buzzfeed
- Code examples
- Usage guidelines
- Accessibility issues
Banner
Spectrum CSS
Adobe
- Code examples
- Tone of voice
Label
Spectrum CSS
Adobe
- Code examples
- Tone of voice
Tag
Spectrum CSS
Adobe
- Code examples
- Tone of voice
Badge
Stacks
Stack Overflow
- Code examples
- Usage guidelines
- Tone of voice
Tag
Stacks
Stack Overflow
- Code examples
- Usage guidelines
- Tone of voice
Pill
Thumbprint
Thumbtack
- Code examples
Tag
United States Web Design System
United States government
- Usage guidelines
- Code examples
Badge
Vercel Design
- Code examples
Tag
Vercel Design
- Code examples
Status Indicator
Workday Canvas Design System
- Usage guidelines
- Accessibility
- Tone of voice