diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md index 034149a5ad1216..3a758e8fe1291c 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 ([#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)). diff --git a/packages/ui/src/badge/stories/usage-guidelines.mdx b/packages/ui/src/badge/stories/usage-guidelines.mdx index 3e390deca98476..b57fa7606c3c47 100644 --- a/packages/ui/src/badge/stories/usage-guidelines.mdx +++ b/packages/ui/src/badge/stories/usage-guidelines.mdx @@ -5,7 +5,20 @@ import * as UsageGuidelinesStories from './usage-guidelines.story'; # Badge usage guidelines -## Choosing intent +## Badges should not be interactive + +Badges communicate status or metadata. They 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. + +## Choose badge intent based on the attention a status needs @@ -110,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.