Skip to content

New style for badge component#6045

Open
lucascumsille wants to merge 1 commit into
masterfrom
badge-style
Open

New style for badge component#6045
lucascumsille wants to merge 1 commit into
masterfrom
badge-style

Conversation

@lucascumsille

@lucascumsille lucascumsille commented Jul 16, 2026

Copy link
Copy Markdown
Contributor

Fixes: Brent and Dudley provide feedback about how the current style for the badge component can be confused with a button.

  • Decreased padding.
  • Make the badge more similar to the "tags" from GOVUK.
  • By default the border-color and background of the badge have the same colour to give a highlighted text effect.
  • Replaced some of the attributes with variables so we can avoid overrides.
  • For the font-size; I wanted a rule to make sure we don't go below 14px for cobrands that use the classic 16px body size. And for cobrand that use >16px the badge doesn't look too big.

Preview

Screenshot 2026-07-16 at 10 46 51 Screenshot 2026-07-16 at 10 47 04 Screenshot 2026-07-16 at 10 47 26 Screenshot 2026-07-16 at 11 19 38

Archive 2.zip
Archive.zip

⚠️ Considering the start the report with an image feature has already been around a few months, not sure if the "New" badge is needed anymore, so we can drop this component. I don't think we use it anywhere else.

[skip changelog]

@codecov

codecov Bot commented Jul 16, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 83.38%. Comparing base (7c36485) to head (07e0c67).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #6045      +/-   ##
==========================================
+ Coverage   83.37%   83.38%   +0.01%     
==========================================
  Files         500      500              
  Lines       37422    37418       -4     
  Branches     6176     6176              
==========================================
+ Hits        31199    31200       +1     
+ Misses       4415     4411       -4     
+ Partials     1808     1807       -1     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Fixes: Brent and Dudley provide feedback about how the current style for the badge component can be confused with a button.

- Decreased padding.
- Make the badge more similar to the "tags" from GOVUK.
- By default the `border-color` and background of the `badge` have the same colour to give a highlighted text effect.
- Replaced some of the attributes with variables so we can avoid overrides.
@lucascumsille

Copy link
Copy Markdown
Contributor Author

If approved get rid of the custom code for badge for Dudley and CRT

@lucascumsille
lucascumsille marked this pull request as ready for review July 21, 2026 04:55
@lucascumsille
lucascumsille requested a review from dracos July 21, 2026 04:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant