From 117022e60848cd4caf21dff2f19cd52d64877723 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 16 Oct 2026 20:13:48 +0900 Subject: [PATCH 1/3] Docs: Clarify that badges should not be interactive --- packages/ui/CHANGELOG.md | 1 + packages/ui/src/badge/stories/usage-guidelines.mdx | 13 +++++++++++++ 2 files changed, 14 insertions(+) diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 034149a5ad1216..46e61265c3c578 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -45,6 +45,7 @@ ### Documentation +- Clarify that badges should not be interactive in the usage guidelines. - `Tabs`: Preserve intrinsic icon styles in the tab icons and tooltips story ([#84618](https://github.com/WordPress/gutenberg/pull/84618)). - Document accessible naming for Combobox popups ([#84551](https://github.com/WordPress/gutenberg/pull/84551)). - Add popup width stories for Autocomplete, Combobox, Select, SearchableSelect, and SearchableChipSelect ([#84320](https://github.com/WordPress/gutenberg/pull/84320)). diff --git a/packages/ui/src/badge/stories/usage-guidelines.mdx b/packages/ui/src/badge/stories/usage-guidelines.mdx index 3e390deca98476..153a4d9b23cab5 100644 --- a/packages/ui/src/badge/stories/usage-guidelines.mdx +++ b/packages/ui/src/badge/stories/usage-guidelines.mdx @@ -5,6 +5,19 @@ import * as UsageGuidelinesStories from './usage-guidelines.story'; # Badge usage guidelines +## Interactivity + +Badges should not be interactive. They communicate status or metadata and should not perform actions or navigate to another page. + +### ❌ Don't + +- **Use badges as links or buttons.** Do not add click handlers or make badges focusable to trigger actions or navigation. + +### ✅ Do + +- **Use badges to communicate status or metadata.** Keep any related action separate from the badge. +- **Use the appropriate interactive component.** Use [Button](?path=/docs/design-system-components-button--docs) for actions and [Link](?path=/docs/design-system-components-link--docs) for navigation. + ## Choosing intent From 63f790e766427ab34a9624aa144584d112b958d4 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 16 Oct 2026 20:14:22 +0900 Subject: [PATCH 2/3] Docs: Link Badge guidance changelog to PR --- packages/ui/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 46e61265c3c578..3a758e8fe1291c 100644 --- a/packages/ui/CHANGELOG.md +++ b/packages/ui/CHANGELOG.md @@ -45,7 +45,7 @@ ### Documentation -- Clarify that badges should not be interactive in the usage guidelines. +- Clarify that badges should not be interactive in the usage guidelines ([#84920](https://github.com/WordPress/gutenberg/pull/84920)). - `Tabs`: Preserve intrinsic icon styles in the tab icons and tooltips story ([#84618](https://github.com/WordPress/gutenberg/pull/84618)). - Document accessible naming for Combobox popups ([#84551](https://github.com/WordPress/gutenberg/pull/84551)). - Add popup width stories for Autocomplete, Combobox, Select, SearchableSelect, and SearchableChipSelect ([#84320](https://github.com/WordPress/gutenberg/pull/84320)). From fd42d206dbbfc2a5714e276bc7166a38a035bcb2 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 16 Oct 2026 20:40:32 +0900 Subject: [PATCH 3/3] Docs: State Badge usage instructions in section headings --- packages/ui/src/badge/stories/usage-guidelines.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/badge/stories/usage-guidelines.mdx b/packages/ui/src/badge/stories/usage-guidelines.mdx index 153a4d9b23cab5..b57fa7606c3c47 100644 --- a/packages/ui/src/badge/stories/usage-guidelines.mdx +++ b/packages/ui/src/badge/stories/usage-guidelines.mdx @@ -5,9 +5,9 @@ import * as UsageGuidelinesStories from './usage-guidelines.story'; # Badge usage guidelines -## Interactivity +## Badges should not be interactive -Badges should not be interactive. They communicate status or metadata and should not perform actions or navigate to another page. +Badges communicate status or metadata. They should not perform actions or navigate to another page. ### ❌ Don't @@ -18,7 +18,7 @@ Badges should not be interactive. They communicate status or metadata and should - **Use badges to communicate status or metadata.** Keep any related action separate from the badge. - **Use the appropriate interactive component.** Use [Button](?path=/docs/design-system-components-button--docs) for actions and [Link](?path=/docs/design-system-components-link--docs) for navigation. -## Choosing intent +## Choose badge intent based on the attention a status needs @@ -123,7 +123,7 @@ Use the least attention‑grabbing intent that still: - Marks what isn't final, or - Confirms a key success state in that context. -## Using with icons +## Keep icons outside badges `Badge` is text-only. Intent is communicated through color and label — not through icons inside the badge.