diff --git a/docs/docs/components/badge.md b/docs/docs/components/badge.md
index abc4a7020..fad003729 100644
--- a/docs/docs/components/badge.md
+++ b/docs/docs/components/badge.md
@@ -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.