diff options
-rw-r--r-- | site/content/docs/5.0/components/badge.md | 30 |
1 files changed, 26 insertions, 4 deletions
diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md index 50571d8856..de80d3b27a 100644 --- a/site/content/docs/5.0/components/badge.md +++ b/site/content/docs/5.0/components/badge.md @@ -6,10 +6,12 @@ group: components toc: true --- -## Example +## Examples 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. +### Headings + {{< example >}} <h1>Example heading <span class="badge bg-secondary">New</span></h1> <h2>Example heading <span class="badge bg-secondary">New</span></h2> @@ -19,6 +21,8 @@ Badges scale to match the size of the immediate parent element by using relative <h6>Example heading <span class="badge bg-secondary">New</span></h6> {{< /example >}} +### Buttons + Badges can be used as part of links or buttons to provide a counter. {{< example >}} @@ -31,10 +35,28 @@ Note that depending on how they are used, badges may be confusing for users of s Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text. +### Positioned + +Use utilities to modify a `.badge` and position it in the corner of a link or button. + {{< example >}} -<button type="button" class="btn btn-primary"> - Profile <span class="badge bg-secondary">9</span> - <span class="visually-hidden">unread messages</span> +<button type="button" class="btn btn-primary position-relative"> + Inbox + <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger"> + 99+ + <span class="visually-hidden">unread messages</span> + </span> +</button> +{{< /example >}} + +You can also replace the `.badge` class with a few more utilities without a count for a more generic indicator. + +{{< example >}} +<button type="button" class="btn btn-primary position-relative"> + Profile + <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle"> + <span class="visually-hidden">New alerts</span> + </span> </button> {{< /example >}} |