Add positioned badges example to docs (#34143)

* Update documentation for badges

* Removes useless changes, as well as fixes an example

* Fixes some text with a badge example

Co-authored-by: Mark Otto <markd.otto@gmail.com>

diff --git a/site/content/docs/5.0/components/badge.md b/site/content/docs/5.0/components/badge.md
index 50571d885624f2895b3aa3df8f9d28d44491f0e3..de80d3b27a59cbde392250644308742829587d6c 100644 (file)
--- 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 >}}