feat(react): add Badge and Status, the first Bones-only components - #48
Merged
Conversation
Badge is a small label for categories, counts, and states: a plain non-focusable span in nine tints (neutral plus the eight palette hues) and two sizes (24px, 16px), with an optional status dot and icons as children before the text. Status is the 8px dot in the five feedback colors; with a label it is an image named by it, without one it is decorative beside text that already reads the state, which is how the Badge uses it. Both are built as if wrapping a Base UI part: semantic tokens only, data-attribute variants, per-root size vars, aria pass- through, and contract tests. The tints come from new semantic tokens, a soft fill and readable text per hue in both modes (the matrix theme collapses them to phosphor), with a row in the theming override reference. Docs pages with playgrounds, nav, llms.txt, the roadmap, and the changelog follow.
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
usebones-www | 22fc08d | Sep 06 2026, 06:28 PM |
… wider variant spacing
…s get a status dot The Experimental mark on Icons is a compact neutral Badge instead of a one-off pill, and nav items can carry a Status dot after the title: an info dot named New marks the components added this round, Badge and Status themselves.
…ver it Between the mobile breakpoint and the width the three columns need, pages with a rail reserve its width on the content, so prose wraps beside the sticky rail rather than underneath it.
…widths The mobile layout now starts at 64rem so tablets use the header menu and drawer, and the controls rail is hidden there instead of stacking under the playground.
…lumn Three tiers: phones get one column and no rail, tablets get the drawer navigation with the rail beside a centered content column, desktop keeps the three columns.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Verified