diff --git a/docs/components/label.md b/docs/components/label.md
deleted file mode 100644
index e1495201ce..0000000000
--- a/docs/components/label.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-layout: docs
-title: Labels
-group: components
----
-
-Small and adaptive tag for adding context to just about any content.
-
-## Example
-
-Labels scale to match the size of the immediate parent element by using relative font sizing and `em` units.
-
-{% example html %}
-
Example heading New
-Example heading New
-Example heading New
-Example heading New
-Example heading New
-Example heading New
-{% endexample %}
-
-## Contextual variations
-
-Add any of the below mentioned modifier classes to change the appearance of a label.
-
-{% example html %}
-Default
-Primary
-Success
-Info
-Warning
-Danger
-{% endexample %}
-
-## Pill labels
-
-Use the `.label-pill` modifier class to make labels more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
-
-{% example html %}
-Default
-Primary
-Success
-Info
-Warning
-Danger
-{% endexample %}
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index c3d466d5fb..db339c824d 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -24,22 +24,22 @@ The most basic list group is simply an unordered list with list items, and the p
{% endexample %}
-## Labels
+## Tags
-Add labels to any list group item to show unread counts, activity, etc.
+Add tags to any list group item to show unread counts, activity, etc.
{% example html %}
-
- 14
+ 14
Cras justo odio
-
- 2
+ 2
Dapibus ac facilisis in
-
- 1
+ 1
Morbi leo risus
diff --git a/docs/components/tag.md b/docs/components/tag.md
new file mode 100644
index 0000000000..185ea378de
--- /dev/null
+++ b/docs/components/tag.md
@@ -0,0 +1,46 @@
+---
+layout: docs
+title: Tags
+group: components
+---
+
+Small and adaptive tag for adding context to just about any content.
+
+## Example
+
+Tags scale to match the size of the immediate parent element by using relative font sizing and `em` units.
+
+{% example html %}
+Example heading New
+Example heading New
+Example heading New
+Example heading New
+Example heading New
+Example heading New
+{% endexample %}
+
+## Contextual variations
+
+Add any of the below mentioned modifier classes to change the appearance of a tag.
+
+{% example html %}
+Default
+Primary
+Success
+Info
+Warning
+Danger
+{% endexample %}
+
+## Pill tags
+
+Use the `.tag-pill` modifier class to make tags more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
+
+{% example html %}
+Default
+Primary
+Success
+Info
+Warning
+Danger
+{% endexample %}
diff --git a/docs/migration.md b/docs/migration.md
index 814e1d9be0..c11a871dfb 100644
--- a/docs/migration.md
+++ b/docs/migration.md
@@ -128,7 +128,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with
### Badges
-- Dropped the badge component. Use the `.label-pill` modifier together with the label component instead.
+- Dropped the badge component. Use the `.tag-pill` modifier together with the tag component instead.
### Panels, thumbnails, and wells
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 5c86512070..1b5bf0fae6 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -18,7 +18,7 @@
@import "mixins/breakpoints";
@import "mixins/hover";
@import "mixins/image";
-@import "mixins/label";
+@import "mixins/tag";
@import "mixins/reset-filter";
@import "mixins/resize";
@import "mixins/screen-reader";
diff --git a/scss/_print.scss b/scss/_print.scss
index d569cce4d6..b2c93735c7 100644
--- a/scss/_print.scss
+++ b/scss/_print.scss
@@ -92,7 +92,7 @@
border-top-color: #000 !important;
}
}
- .label {
+ .tag {
border: $border-width solid #000;
}
diff --git a/scss/_labels.scss b/scss/_tags.scss
similarity index 52%
rename from scss/_labels.scss
rename to scss/_tags.scss
index ef065bec38..61758426a3 100644
--- a/scss/_labels.scss
+++ b/scss/_tags.scss
@@ -3,13 +3,13 @@
// Requires one of the contextual, color modifier classes for `color` and
// `background-color`.
-.label {
+.tag {
display: inline-block;
- padding: $label-padding-y $label-padding-x;
- font-size: $label-font-size;
- font-weight: $label-font-weight;
+ padding: $tag-padding-y $tag-padding-x;
+ font-size: $tag-font-size;
+ font-weight: $tag-font-weight;
line-height: 1;
- color: $label-color;
+ color: $tag-color;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
@@ -22,16 +22,16 @@
}
// Quick fix for labels in buttons
-.btn .label {
+.btn .tag {
position: relative;
top: -1px;
}
// scss-lint:disable QualifyingElement
// Add hover effects, but only for links
-a.label {
+a.tag {
@include hover-focus {
- color: $label-link-hover-color;
+ color: $tag-link-hover-color;
text-decoration: none;
cursor: pointer;
}
@@ -42,36 +42,36 @@ a.label {
//
// Make them extra rounded with a modifier to replace v3's badges.
-.label-pill {
- padding-right: $label-pill-padding-x;
- padding-left: $label-pill-padding-x;
- @include border-radius($label-pill-border-radius);
+.tag-pill {
+ padding-right: $tag-pill-padding-x;
+ padding-left: $tag-pill-padding-x;
+ @include border-radius($tag-pill-border-radius);
}
// Colors
//
// Contextual variations (linked labels get darker on :hover).
-.label-default {
- @include label-variant($label-default-bg);
+.tag-default {
+ @include tag-variant($tag-default-bg);
}
-.label-primary {
- @include label-variant($label-primary-bg);
+.tag-primary {
+ @include tag-variant($tag-primary-bg);
}
-.label-success {
- @include label-variant($label-success-bg);
+.tag-success {
+ @include tag-variant($tag-success-bg);
}
-.label-info {
- @include label-variant($label-info-bg);
+.tag-info {
+ @include tag-variant($tag-info-bg);
}
-.label-warning {
- @include label-variant($label-warning-bg);
+.tag-warning {
+ @include tag-variant($tag-warning-bg);
}
-.label-danger {
- @include label-variant($label-danger-bg);
+.tag-danger {
+ @include tag-variant($tag-danger-bg);
}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 5953190507..2c48a70594 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -613,26 +613,26 @@ $popover-arrow-outer-width: ($popover-arrow-width + 1px) !default;
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
-// Labels
+// Tags
-$label-default-bg: $gray-light !default;
-$label-primary-bg: $brand-primary !default;
-$label-success-bg: $brand-success !default;
-$label-info-bg: $brand-info !default;
-$label-warning-bg: $brand-warning !default;
-$label-danger-bg: $brand-danger !default;
+$tag-default-bg: $gray-light !default;
+$tag-primary-bg: $brand-primary !default;
+$tag-success-bg: $brand-success !default;
+$tag-info-bg: $brand-info !default;
+$tag-warning-bg: $brand-warning !default;
+$tag-danger-bg: $brand-danger !default;
-$label-color: #fff !default;
-$label-link-hover-color: #fff !default;
-$label-font-size: 75% !default;
-$label-font-weight: bold !default;
-$label-padding-x: .4em !default;
-$label-padding-y: .25em !default;
+$tag-color: #fff !default;
+$tag-link-hover-color: #fff !default;
+$tag-font-size: 75% !default;
+$tag-font-weight: bold !default;
+$tag-padding-x: .4em !default;
+$tag-padding-y: .25em !default;
-$label-pill-padding-x: .6em !default;
+$tag-pill-padding-x: .6em !default;
// Use a higher than normal value to ensure completely rounded edges when
// customizing padding or font-size on labels.
-$label-pill-border-radius: 10rem !default;
+$tag-pill-border-radius: 10rem !default;
// Modals
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index ef30c6b639..f99a722cad 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -34,7 +34,7 @@
@import "card";
@import "breadcrumb";
@import "pagination";
-@import "labels";
+@import "tags";
@import "jumbotron";
@import "alert";
@import "progress";
diff --git a/scss/mixins/_label.scss b/scss/mixins/_tag.scss
similarity index 75%
rename from scss/mixins/_label.scss
rename to scss/mixins/_tag.scss
index 4bc48c60dd..900c54e366 100644
--- a/scss/mixins/_label.scss
+++ b/scss/mixins/_tag.scss
@@ -1,6 +1,6 @@
-// Labels
+// Tags
-@mixin label-variant($color) {
+@mixin tag-variant($color) {
background-color: $color;
&[href] {