question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add badge-* classes

See original GitHub issue

Prerequisites

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 badges_before

After badges_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:closed
  • Created 2 years ago
  • Reactions:5
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
AmProsiuscommented, Feb 26, 2022

Tailwind looks amazing.

Be sure to check out the badge components. That’s where the inspiration came from anyway.

1reaction
mdocommented, Nov 30, 2021

Added to #33627.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found