diff --git a/scss/_badge.scss b/scss/_badge.scss
index 2082f058ec..baa80a75f3 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -9,17 +9,11 @@
@include font-size($badge-font-size);
font-weight: $badge-font-weight;
line-height: 1;
+ color: $badge-color;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
@include border-radius($badge-border-radius);
- @include transition($badge-transition);
-
- @at-root a#{&} {
- @include hover-focus {
- text-decoration: none;
- }
- }
// Empty badges collapse automatically
&:empty {
@@ -32,23 +26,3 @@
position: relative;
top: -1px;
}
-
-// Pill badges
-//
-// Make them extra rounded with a modifier to replace v3's badges.
-
-.badge-pill {
- padding-right: $badge-pill-padding-x;
- padding-left: $badge-pill-padding-x;
- @include border-radius($badge-pill-border-radius);
-}
-
-// Colors
-//
-// Contextual variations (linked badges get darker on :hover).
-
-@each $color, $value in $theme-colors {
- .badge-#{$color} {
- @include badge-variant($value);
- }
-}
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 843303d453..9b2c1a13b3 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -12,7 +12,6 @@
@import "mixins/breakpoints";
@import "mixins/hover";
@import "mixins/image";
-@import "mixins/badge";
@import "mixins/resize";
@import "mixins/screen-reader";
@import "mixins/reset-text";
diff --git a/scss/_variables.scss b/scss/_variables.scss
index d238a8508f..dd141e84a3 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -911,18 +911,11 @@ $toast-header-border-color: rgba(0, 0, 0, .05) !default;
$badge-font-size: 75% !default;
$badge-font-weight: $font-weight-bold !default;
+$badge-color: $white !default;
$badge-padding-y: .25em !default;
-$badge-padding-x: .4em !default;
+$badge-padding-x: .5em !default;
$badge-border-radius: $border-radius !default;
-$badge-transition: $btn-transition !default;
-$badge-focus-width: $input-btn-focus-width !default;
-
-$badge-pill-padding-x: .6em !default;
-// Use a higher than normal value to ensure completely rounded edges when
-// customizing padding or font-size on labels.
-$badge-pill-border-radius: 10rem !default;
-
// Modals
diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss
deleted file mode 100644
index 64b29cb579..0000000000
--- a/scss/mixins/_badge.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@mixin badge-variant($bg) {
- color: color-yiq($bg);
- background-color: $bg;
-
- @at-root a#{&} {
- @include hover-focus {
- color: color-yiq($bg);
- background-color: darken($bg, 10%);
- }
-
- &:focus,
- &.focus {
- outline: 0;
- box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
- }
- }
-}
diff --git a/site/content/docs/4.3/components/badge.md b/site/content/docs/4.3/components/badge.md
index 0f2ec97acd..2d3bc69e8e 100644
--- a/site/content/docs/4.3/components/badge.md
+++ b/site/content/docs/4.3/components/badge.md
@@ -8,22 +8,22 @@ toc: true
## Example
-Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
+Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. As of v5, badges no longer have focus or hover styles for links.
{{< example >}}
-
Example heading New
-
Example heading New
-
Example heading New
-
Example heading New
-
Example heading New
-
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
+
Example heading New
{{< /example >}}
Badges can be used as part of links or buttons to provide a counter.
{{< example >}}
{{< /example >}}
@@ -33,19 +33,19 @@ Unless the context is clear (as with the "Notifications" example, where it is un
{{< example >}}
{{< /example >}}
-## Contextual variations
+## Background colors
-Add any of the below mentioned modifier classes to change the appearance of a badge.
+Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap's default `.bg-light`, you'll likely need a text color utility like `.text-dark` for proper styling. This is because background utilities do not set anything but `background-color`.
{{< example >}}
{{< badge.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
-{{ .name | title }}{{- end -}}
+{{ .name | title }}{{- end -}}
{{< /badge.inline >}}
{{< /example >}}
@@ -55,22 +55,11 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
## Pill badges
-Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
+Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`.
{{< example >}}
{{< badge.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
-{{ .name | title }}{{- end -}}
-{{< /badge.inline >}}
-{{< /example >}}
-
-## Links
-
-Using the contextual `.badge-*` classes on an `` element quickly provide _actionable_ badges with hover and focus states.
-
-{{< example >}}
-{{< badge.inline >}}
-{{- range (index $.Site.Data "theme-colors") }}
-{{ .name | title }}{{- end -}}
+{{ .name | title }}{{- end -}}
{{< /badge.inline >}}
{{< /example >}}