Add badge-* classes
See original GitHub issuePrerequisites
- I have searched for duplicate or closed feature requests
- I have read the contributing guidelines
Proposal
To make the badge component less intrusive, I recommend to add badge-*
classes to give them a more alert-like style. If a user wanted a bolder badge, they can always omit the badge-*
class and style the badges the classic bg-*
way.
Essentially, the badge-*
classes would give a style like background-color: $color-100
and color: $color-700
with maybe a few tweaks where needed.
Before
After
Motivation and context
There’s currently no option to de-emphasize badges with the current utility classes. Also the badge component looks rather outdated and this is an attempt to get back to modern design principles.
As a plus, adding these classes is a non-breaking change and can be applied anytime. If you are interested in the badge-*
classes, I’d be happy to create a PR.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:5
- Comments:11 (4 by maintainers)
Top Results From Across the Web
Badges
Add any of the below mentioned modifier classes to change the appearance of a badge. Primary Secondary Success Danger Warning Info Light Dark....
Read more >W3.CSS Badges
W3.CSS Badge Classes · Badges · Colored Badges · Badges in Buttons · Badges in Lists · Badges in Tables · Badge Sizes...
Read more >Bootstrap Badges - examples & tutorial
Use .badge class to provide your visitors with highlighted, new or unread items by adding it to links, text navs, and more.
Read more >Badge | Foundation for Sites 6 Docs
Add the .badge class to an element to create a badge. In the below example, we're using <span> , but any tag will...
Read more >Using badges - MoodleDocs
Adding a course badge ... If course badges have been enabled in Site administration > Badges > Badges settings then a teacher can...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Be sure to check out the badge components. That’s where the inspiration came from anyway.
Added to #33627.