js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add size example to <wa-badge> (#915)

Browse Source 
* add size example

* Update docs/docs/components/badge.md

Co-authored-by: Lea Verou <lea@verou.me>

* Update docs/docs/components/badge.md

Co-authored-by: Lea Verou <lea@verou.me>

* Update docs/docs/components/badge.md

Co-authored-by: Lea Verou <lea@verou.me>

---------

Co-authored-by: Lea Verou <lea@verou.me>
This commit is contained in:
Cory LaViska
2025-05-12 11:02:28 -04:00
committed by GitHub
parent 6afc6e928c
commit 6ee10f44f4
1 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/docs/components/badge.md
View File

@@ -65,6 +65,18 @@ Use the `appearance` attribute to change the badge's visual appearance.
</div>
```
### Size
Badges are sized relative to the current font size. You can set `font-size` on any badge (or an ancestor element) to change it.
```html {.example}
<wa-badge variant="brand" style="font-size: var(--wa-font-size-xs);">Brand</wa-badge>
<wa-badge variant="brand" style="font-size: var(--wa-font-size-s);">Brand</wa-badge>
<wa-badge variant="brand" style="font-size: var(--wa-font-size-m);">Brand</wa-badge>
<wa-badge variant="brand" style="font-size: var(--wa-font-size-l);">Brand</wa-badge>
<wa-badge variant="brand" style="font-size: var(--wa-font-size-xl);">Brand</wa-badge>
```
### Pill Badges
Use the `pill` attribute to give badges rounded edges.