Skip to content

Commit 58b76ce

Browse files
erickteowarangErick Teowarangclaude
authored
feat(badge): add info + subtle-info variants, expand outline demo (#294)
* feat(badge): add subtle-info variant 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> * feat(badge): add solid info variant + show all outline variants in demo 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> * chore(demo): split Badge demo into Solid / Subtle / Outline rows 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> --------- Co-authored-by: Erick Teowarang <eteowarang@erick-tailor-macbook.tail564f7.ts.net> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1 parent 4d2f063 commit 58b76ce

4 files changed

Lines changed: 52 additions & 10 deletions

File tree

‎.changeset/add-subtle-info-badge.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@tailor-platform/app-shell": patch
3+
---
4+
5+
Add `info` and `subtle-info` badge variants for informational or in-progress status labels (blue palette, matching the existing `outline-info` dot color). Also extend the primitives demo to show all five outline variants (previously only `outline-success` was rendered).
6+
7+
```tsx
8+
<Badge variant="info">New</Badge>
9+
<Badge variant="subtle-info">In Progress</Badge>
10+
```

‎docs/components/badge.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,11 @@ import { Badge, type BadgeVariant, type BadgeOptions } from "@tailor-platform/ap
2020
<Badge variant="success">Success</Badge>
2121
<Badge variant="warning">Warning</Badge>
2222
<Badge variant="error">Error</Badge>
23+
<Badge variant="info">Info</Badge>
2324
<Badge variant="subtle-success">Subtle Success</Badge>
2425
<Badge variant="subtle-warning">Subtle Warning</Badge>
2526
<Badge variant="subtle-error">Subtle Error</Badge>
27+
<Badge variant="subtle-info">Subtle Info</Badge>
2628
```
2729

2830
## Variants
@@ -37,9 +39,11 @@ Filled variants for high emphasis, plus subtle variants for lower-emphasis statu
3739
<Badge variant="warning">Pending</Badge>
3840
<Badge variant="error">Rejected</Badge>
3941
<Badge variant="neutral">Draft</Badge>
42+
<Badge variant="info">New</Badge>
4043
<Badge variant="subtle-success">Matched</Badge>
4144
<Badge variant="subtle-warning">Needs Attention</Badge>
4245
<Badge variant="subtle-error">Needs Review</Badge>
46+
<Badge variant="subtle-info">In Progress</Badge>
4347
```
4448

4549
### Outline Variants with Status Dots
@@ -72,9 +76,11 @@ type BadgeVariant =
7276
| "warning" // Yellow
7377
| "error" // Red/destructive
7478
| "neutral" // Gray/secondary
79+
| "info" // Blue
7580
| "subtle-success" // Low-emphasis green
7681
| "subtle-warning" // Low-emphasis yellow
7782
| "subtle-error" // Low-emphasis red/destructive
83+
| "subtle-info" // Low-emphasis blue
7884
// Outline variants with status dots
7985
| "outline-success"
8086
| "outline-warning"
@@ -196,9 +202,11 @@ function ProductBadge({ product }: { product: Product }) {
196202
| `warning` | ![Yellow badge] | Pending, in progress, attention needed |
197203
| `error` | ![Red badge] | Failed, rejected, critical |
198204
| `neutral` | ![Gray badge] | Draft, inactive, disabled |
205+
| `info` | ![Blue badge] | Informational, new, in-progress |
199206
| `subtle-success` | ![Subtle green badge] | Low-emphasis completed or matched statuses |
200207
| `subtle-warning` | ![Subtle yellow badge] | Low-emphasis pending or attention states |
201208
| `subtle-error` | ![Subtle red badge] | Low-emphasis failures or exceptions |
209+
| `subtle-info` | ![Subtle blue badge] | Low-emphasis informational or in-progress |
202210

203211
### Outline Variants
204212

‎examples/nextjs-app/src/modules/pages/primitives-demo.tsx‎

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -95,16 +95,37 @@ export const primitiveComponentsDemoResource = defineResource({
9595
<Card.Root>
9696
<Card.Header title="Badge" />
9797
<Card.Content>
98-
<div style={rowStyle}>
99-
<Badge>Default</Badge>
100-
<Badge variant="success">Success</Badge>
101-
<Badge variant="warning">Warning</Badge>
102-
<Badge variant="error">Error</Badge>
103-
<Badge variant="neutral">Neutral</Badge>
104-
<Badge variant="subtle-success">Subtle Success</Badge>
105-
<Badge variant="subtle-warning">Subtle Warning</Badge>
106-
<Badge variant="subtle-error">Subtle Error</Badge>
107-
<Badge variant="outline-success">Outline</Badge>
98+
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
99+
<div>
100+
<div style={labelStyle}>Solid</div>
101+
<div style={rowStyle}>
102+
<Badge>Default</Badge>
103+
<Badge variant="success">Success</Badge>
104+
<Badge variant="warning">Warning</Badge>
105+
<Badge variant="error">Error</Badge>
106+
<Badge variant="neutral">Neutral</Badge>
107+
<Badge variant="info">Info</Badge>
108+
</div>
109+
</div>
110+
<div>
111+
<div style={labelStyle}>Subtle</div>
112+
<div style={rowStyle}>
113+
<Badge variant="subtle-success">Subtle Success</Badge>
114+
<Badge variant="subtle-warning">Subtle Warning</Badge>
115+
<Badge variant="subtle-error">Subtle Error</Badge>
116+
<Badge variant="subtle-info">Subtle Info</Badge>
117+
</div>
118+
</div>
119+
<div>
120+
<div style={labelStyle}>Outline</div>
121+
<div style={rowStyle}>
122+
<Badge variant="outline-success">Outline Success</Badge>
123+
<Badge variant="outline-warning">Outline Warning</Badge>
124+
<Badge variant="outline-error">Outline Error</Badge>
125+
<Badge variant="outline-info">Outline Info</Badge>
126+
<Badge variant="outline-neutral">Outline Neutral</Badge>
127+
</div>
128+
</div>
108129
</div>
109130
</Card.Content>
110131
</Card.Root>

‎packages/core/src/components/badge.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,15 @@ const badgeVariants = cva(
1717
"astw:border-transparent astw:bg-destructive astw:text-destructive-foreground astw:hover:bg-destructive/80",
1818
neutral:
1919
"astw:border-transparent astw:bg-secondary astw:text-secondary-foreground astw:hover:bg-secondary/80",
20+
info: "astw:border-transparent astw:bg-blue-500 astw:text-white astw:hover:bg-blue-600",
2021
"subtle-success":
2122
"astw:border-transparent astw:bg-green-500/10 astw:text-green-700 astw:hover:bg-green-500/20 astw:dark:text-green-500",
2223
"subtle-warning":
2324
"astw:border-transparent astw:bg-yellow-500/10 astw:text-yellow-700 astw:hover:bg-yellow-500/20 astw:dark:text-yellow-500",
2425
"subtle-error":
2526
"astw:border-transparent astw:bg-destructive/10 astw:text-destructive astw:hover:bg-destructive/20",
27+
"subtle-info":
28+
"astw:border-transparent astw:bg-blue-500/10 astw:text-blue-700 astw:hover:bg-blue-500/20 astw:dark:text-blue-500",
2629
// Outline variants with status dots - matches Figma design
2730
"outline-success":
2831
"astw:gap-0.5 astw:pl-1.5 astw:pr-2 astw:border-border astw:bg-card astw:text-foreground",

0 commit comments

Comments
 (0)