diff options
author | Joel Johnson <68816736+jjoel1630@users.noreply.github.com> | 2021-06-03 19:09:13 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-06-03 19:09:13 +0300 |
commit | f14d1a4c1700ddb0df72645bab3551877be2b21e (patch) | |
tree | 0b400d9795e82a3ab1481eec16c121891d502def /site/content/docs | |
parent | dbda13d5ef6897be41f1e872667f6aa30860efb4 (diff) |
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>
Diffstat (limited to 'site/content/docs')
-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 >}} |