feat(badge): add info + subtle-info variants, expand outline demo#294
Merged
Conversation
Adds a low-emphasis blue badge variant for informational or in-progress status labels, completing the subtle-* family alongside success/warning/error. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds a solid blue `info` variant alongside the new `subtle-info`, filling the gap in the solid family (success/warning/error/neutral/info). Also expands the primitives demo to render all five outline variants instead of only `outline-success` as a placeholder. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
erickteowarang
changed the title
commit: |
The single-row layout was too crowded after the info + outline variants were added. Mirrors the Button card's labeled-row pattern. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Adds info and subtle-info badge variants (blue palette) to complete the variant matrix, and expands the Next.js primitives demo to render all solid/subtle/outline variants grouped by category.
Changes:
- Add
infoandsubtle-infocva entries tobadgeVariants. - Update badge docs and add a patch changeset.
- Reorganize primitives demo Badge card into Solid/Subtle/Outline rows showing all variants.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/core/src/components/badge.tsx | Adds solid info and subtle-info cva variants matching existing blue palette. |
| docs/components/badge.md | Documents new variants in usage, type union, and reference table. |
| examples/nextjs-app/src/modules/pages/primitives-demo.tsx | Groups badges into Solid/Subtle/Outline rows; renders all five outline variants. |
| .changeset/add-subtle-info-badge.md | Patch changeset describing the new variants. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
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
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.
Summary
info(solid blue) andsubtle-info(low-emphasis blue) badge variants, completing the blue/info row in the variant matrix.infousesbg-blue-500 text-white hover:bg-blue-600, matching theoutline-infostatus-dot color.infousesbg-blue-500/10 text-blue-700 dark:text-blue-500 hover:bg-blue-500/20, mirroring the palette consumers like denim-tears have been hand-rolling as a local shim.outline-successwas shown as a "Outline" placeholder, leavingoutline-warning,outline-error,outline-info,outline-neutralinvisible from the showcase.What it looks like now:
Variant matrix after this PR
(
subtle-neutralis the remaining gap but I mean...it's neutral? What's there to be subtle about?)Files
packages/core/src/components/badge.tsx— two new cva variant entriesdocs/components/badge.md— basic usage, type definition, visual referenceexamples/nextjs-app/src/modules/pages/primitives-demo.tsx— all info + outline demo entries.changeset/add-subtle-info-badge.md— patch changesetBadgeVariantis derived fromBadgeProps["variant"], so no separate union update is needed elsewhere.Test plan
pnpm run type-check— cleanpnpm run lint— 0 warnings/0 errorspnpm run test— 1103/1103 pass/dashboard/primitives-demo) and confirm both info variants render with the expected blue palette, and all five outline variants render with their status dots🤖 Generated with Claude Code