Charles de Dreuille
4032ad7fc4
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
Backstage UI Docs
Backstage UI is our internal UI library built for Backstage. We built this website to document the library and its components. You can view this website here.
How to run locally
This website is built with Next.js and it is hosted on Github pages. To run it locally, you can run the following command:
yarn start
Deployment
Deployments are done automatically when a PR is merged into the master branch. We host the website using Github pages.
Maintaining Component Changelogs
After a @backstage/ui release, sync the component changelogs to keep documentation up-to-date:
yarn sync:changelog
This script:
- Parses
packages/ui/CHANGELOG.mdfor new versions - Extracts entries tagged with "Affected components: ..."
- Updates
src/utils/changelog.tswith new entries - Handles both component-specific and general package changes
After running, review the changes in src/utils/changelog.ts and commit them.
Preview changes before writing:
yarn sync:changelog:dry-run
Running this gives you a summary of what would be written, without actually adding or changing any files.