feat(ui): add Badge component

Adds a new `Badge` component to the Backstage UI library. Badge shares the same visual appearance as `Tag` (size tokens, colors, border radius, icon slot) but renders as a plain non-interactive `<span>` with no React Aria plumbing.

Key characteristics:
- Plain DOM element — accessible text content exposed to screen readers without any role override
- Background consumer — participates in the bg context system and steps up neutral background levels (`neutral-2` → `neutral-3` → `neutral-4`) when placed inside colored containers
- Supports `icon`, `size` (`small` | `medium`, defaults to `small`), `children`, and `className` props
- Fully themeable via `BadgeDefinition`

Also includes Storybook stories and full docs-ui documentation (props table, examples, theming section, changelog).

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Made-with: Cursor

This commit is contained in:

Charles de Dreuille

2026-04-03 17:19:02 +01:00

parent 8f9c1d64b8

commit 4032ad7fc4

15 changed files with 413 additions and 0 deletions

									
										.changeset/add-badge-component.md
									
		+7
		
												View File
												
				@@ -0,0 +1,7 @@

				---

				'@backstage/ui': patch

				---

				Added new `Badge` component for non-interactive labeling and categorization of content. It shares the visual appearance of `Tag` but renders as a plain DOM element with no interactive states.

				**Affected components:** Badge