diff --git a/.changeset/large-buttons-ring.md b/.changeset/large-buttons-ring.md
new file mode 100644
index 000000000..5efcb6bda
--- /dev/null
+++ b/.changeset/large-buttons-ring.md
@@ -0,0 +1,6 @@
+---
+'@microsoft/atlas-site': minor
+'@microsoft/atlas-css': minor
+---
+
+Update badge styles to handle icon only badges. Add new extra large badge size.
diff --git a/css/src/components/badge.scss b/css/src/components/badge.scss
index 016eb3abd..ad2bdf6f3 100644
--- a/css/src/components/badge.scss
+++ b/css/src/components/badge.scss
@@ -1,4 +1,5 @@
-$badge-padding-block: 0.2em !default;
+$badge-icon-padding-block: 0.5em !default;
+$badge-padding-block: 0.25em !default;
$badge-padding-inline: 0.5em !default;
$badge-gap-size: 0.375em !default;
@@ -6,9 +7,10 @@ $badge-gap-size: 0.375em !default;
$badge-font-size: $font-size-8 !default;
$badge-font-size-sm: $font-size-9 !default;
$badge-font-size-lg: $font-size-7 !default;
+$badge-font-size-xl: $font-size-6 !default;
$badge-font-weight: $weight-semibold !default;
-$badge-icon-font-size: 0.875em !default;
+$badge-icon-size: 1.3em !default;
$badge-border-width: $border-width !default;
$badge-border-radius: $border-radius-rounded !default;
@@ -72,7 +74,11 @@ $badge-border-radius: $border-radius-rounded !default;
}
.icon {
- font-size: $badge-icon-font-size;
+ font-size: $badge-icon-size;
+ }
+
+ &:has(.icon:only-child) {
+ padding: $badge-icon-padding-block;
}
// Sizes
@@ -84,4 +90,8 @@ $badge-border-radius: $border-radius-rounded !default;
&.badge-lg {
font-size: $badge-font-size-lg;
}
+
+ &.badge-xl {
+ font-size: $badge-font-size-xl;
+ }
}
diff --git a/site/src/components/badge.md b/site/src/components/badge.md
index 9a689ccf1..9ba372459 100644
--- a/site/src/components/badge.md
+++ b/site/src/components/badge.md
@@ -2,7 +2,6 @@
title: Badge
description: The Badge component in the Atlas Design System
template: standard
-figmaEmbed: https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fdesign%2FuVA2amRR71yJZ0GS6RI6zL%2F%25F0%259F%258C%259E-Atlas-Design-Library%3Fm%3Dauto%26node-id%3D3381-10722%26t%3DZhpJOvxIFDBwfkR7-1
classType: Component
classPrefixes:
- badge
@@ -22,12 +21,13 @@ Badges use short text, color, and an optional icon for quick recognition.
### Sizes
-The following classes are available for resizing: `badge-sm`, `badge-lg`.
+The following classes are available for resizing: `badge-sm`, `badge-lg`, `badge-xl`.
```html
-Badge
+Badge Small
Badge
-Badge
+Badge Large
+Badge Extra Large
```
### Semantic colors & types
@@ -45,17 +45,108 @@ By default, badges are secondary badges.
### Badge with icon
-Badges can include icons. To do this, nest the [icon component](./icon.md) inside a badge.
+Badges can include icons and text. To do this, nest the [icon component](./icon.md) inside a badge.
```html
+
+
+
+
+ Badge Small
+
-
Badge
+
+
+
+
+ Badge Large
+
+
+
+
+
+ Badge Extra Large
+
+```
+
+### Badge with Icon only
+
+Badges with only icons, can be used with all badge sizes.
+
+When a badge is required to understand some information (i.e. not decorative), ensure that context is exposed to screenreaders with by applying `role="img"` and an `aria-label` to the badge.
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
```