Skip to content

Commit a5f37a8

Browse files
Shrinks99claude
Shrinks99
and
claude
authored
Add monospace badge prop, secondary variant, & sm badge style (#78)
Co-authored-by: Claude <claude@users.noreply.github.com>
1 parent 0d32d37 commit a5f37a8

12 files changed

Lines changed: 222 additions & 21 deletions

File tree

‎.claude/settings.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
"Skill(create-documentation)",
55
"Skill(create-component)",
66
"Bash(pnpm build:*)",
7+
"Bash(pnpm dev:*)",
8+
"WebFetch(domain:astro.build)",
9+
"Bash(ls:*)",
10+
"Bash(pnpm astro check:*)",
711
"Bash(git stash:*)",
812
"Bash(curl -s http://localhost:4321/:*)"
913
]

‎packages/demo/src/content/components/badge.mdx‎

Lines changed: 89 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@ import {
1616

1717
The Badge component comes with four color variants to visually communicate different statuses or contexts:
1818

19-
- **Neutral:** For non-critical, informational, or secondary status.
2019
- **Primary:** The default style, suitable for general labeling.
20+
- **Secondary:** Use after primary but information is of secondary (or equal) importance
21+
- **Neutral:** For non-critical, informational, or secondary status.
2122
- **Warning:** Indicates something that is worthy of more attention.
2223
- **Danger:** Indicates an error or danger state that requires serious attention.
2324
- **Success:** Represents positive outcomes or completed statuses.
@@ -47,34 +48,81 @@ import { Badge } from "@eqtylab/equality";
4748
<div className="grid grid-cols-[auto_auto_auto] gap-6">
4849
<div className="flex flex-col items-start space-y-3">
4950
<PanelLabel label="Badge Variant" />
50-
<Badge variant="neutral">Neutral</Badge>
5151
<Badge variant="primary">Primary</Badge>
52+
<Badge variant="secondary">Secondary</Badge>
53+
<Badge variant="neutral">Neutral</Badge>
5254
<Badge variant="warning">Warning</Badge>
5355
<Badge variant="danger">Danger</Badge>
5456
<Badge variant="success">Success</Badge>
5557
</div>
5658
<div className="flex flex-col items-start space-y-3">
5759
<PanelLabel label="With Icons" />
58-
<Badge variant="neutral" icon="Circle">
59-
Neutral
60-
</Badge>
6160
<Badge variant="primary" icon="Shield">
6261
Primary
6362
</Badge>
63+
<Badge variant="secondary" icon="Circle">
64+
Secondary
65+
</Badge>
66+
<Badge variant="neutral" icon="Circle">
67+
Neutral
68+
</Badge>
6469
<Badge variant="warning">Warning</Badge>
6570
<Badge variant="danger">Danger</Badge>
6671
<Badge variant="success">Success</Badge>
6772
</div>
6873
<div className="flex flex-col items-start space-y-3">
6974
<PanelLabel label="Icon Only" />
70-
<Badge variant="neutral" icon="Circle" display="icon-only" />
7175
<Badge variant="primary" icon="Shield" display="icon-only" />
76+
<Badge variant="secondary" icon="Circle" display="icon-only" />
77+
<Badge variant="neutral" icon="Circle" display="icon-only" />
7278
<Badge variant="warning" display="icon-only" />
7379
<Badge variant="danger" display="icon-only" />
7480
<Badge variant="success" display="icon-only" />
7581
</div>
7682
</div>
7783

84+
## Sizes
85+
86+
---
87+
88+
The Badge comes in two sizes. The default `md` size is 20px tall and should be used in most situations, while `sm` is 16px tall for use in tighter layouts where density is desired (such as log viewers). Small badges generally look better with `pill={false}` applied.
89+
90+
<div className="flex items-center gap-3">
91+
<Badge size="md">Medium (Default)</Badge>
92+
<Badge size="sm" icon="Check">
93+
Small
94+
</Badge>
95+
<Badge size="sm" pill={false} icon="Check">
96+
Small square
97+
</Badge>
98+
</div>
99+
100+
### Usage
101+
102+
```tsx
103+
<Badge size="md">Medium (Default)</Badge>
104+
<Badge size="sm">Small (Square)</Badge>
105+
<Badge size="sm" pill={false}>Small (Square)</Badge>
106+
```
107+
108+
## Pill Shape
109+
110+
---
111+
112+
Badges are pill-shaped by default. Set `pill={false}` when using badges along with dense in-line text.
113+
114+
<div className="flex items-center gap-3">
115+
<Badge>Pill (Default)</Badge>
116+
<Badge pill={false}>Square</Badge>
117+
</div>
118+
119+
### Usage
120+
121+
```tsx
122+
<Badge>Pill (Default)</Badge>
123+
<Badge pill={false}>Square</Badge>
124+
```
125+
78126
## Display Modes
79127

80128
---
@@ -130,6 +178,28 @@ The Badge component supports text truncation for long content. Use the `truncate
130178

131179
<BadgeTruncateDemo client:only="react" />
132180

181+
## Monospace
182+
183+
---
184+
185+
Use the `monospace` prop when badges will be rendered atop one another and their contents always or often share the same character count.
186+
187+
<div className="flex items-center gap-3">
188+
<Badge monospace>v1.3.0</Badge>
189+
<Badge monospace variant="success">
190+
0x1a2b
191+
</Badge>
192+
<Badge monospace size="sm">
193+
build-482
194+
</Badge>
195+
</div>
196+
197+
### Usage
198+
199+
```tsx
200+
<Badge monospace>v1.3.0</Badge>
201+
```
202+
133203
## Icons
134204

135205
---
@@ -152,13 +222,16 @@ You can enhance your badge by displaying an icon. The `icon` prop accepts either
152222

153223
---
154224

155-
| Prop | Type | Default | Description |
156-
| ---------------- | ---------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- |
157-
| `variant` | `"neutral"` \| `"primary"` \| `"warning"` \| `"danger"` \| `"success"` | `"primary"` | The visual style variant of the badge. |
158-
| `display` | `"both"` \| `"text-only"` \| `"icon-only"` | `"both"` | Controls what elements are displayed. `"both"` shows icon and text, `"text-only"` shows only text, `"icon-only"` shows only icon. |
159-
| `icon` | `string` \| `ReactElement` | - | Icon to display. Can be a Lucide icon name or a custom React element. |
160-
| `closeable` | `boolean` | `false` | When true, displays a close button on the badge. |
161-
| `handleClosable` | `() => void` | - | Callback function called when the close button is clicked. Required when `closeable` is true. |
162-
| `truncate` | `boolean` | `false` | When true, truncates long text with an ellipsis and shows full text on hover. |
163-
| `truncateLength` | `number` | `50` | Maximum character length before truncation occurs. |
164-
| `className` | `string` | - | Additional CSS classes to apply to the badge. |
225+
| Prop | Type | Default | Description |
226+
| ---------------- | --------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- |
227+
| `variant` | `"neutral"` \| `"primary"` \| `"secondary"` \| `"warning"` \| `"danger"` \| `"success"` | `"primary"` | The visual style variant of the badge. |
228+
| `size` | `"sm"` \| `"md"` | `"md"` | The size of the badge. `"md"` renders at 20px tall, `"sm"` at 16px tall. |
229+
| `display` | `"both"` \| `"text-only"` \| `"icon-only"` | `"both"` | Controls what elements are displayed. `"both"` shows icon and text, `"text-only"` shows only text, `"icon-only"` shows only icon. |
230+
| `icon` | `string` \| `ReactElement` | - | Icon to display. Can be a Lucide icon name or a custom React element. |
231+
| `pill` | `boolean` | `true` | When true (default), badge is pill-shaped. Set to `false` for a square badge with subtle border radius. |
232+
| `monospace` | `boolean` | `false` | When true, renders badge text in a monospace font. |
233+
| `closeable` | `boolean` | `false` | When true, displays a close button on the badge. |
234+
| `handleClosable` | `() => void` | - | Callback function called when the close button is clicked. Required when `closeable` is true. |
235+
| `truncate` | `boolean` | `false` | When true, truncates long text with an ellipsis and shows full text on hover. |
236+
| `truncateLength` | `number` | `50` | Maximum character length before truncation occurs. |
237+
| `className` | `string` | - | Additional CSS classes to apply to the badge. |

‎packages/tokens/equality-tokens.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,14 @@
163163
"hex": "#25336E"
164164
}
165165
},
166+
"secondary": {
167+
"$type": "color",
168+
"$value": {
169+
"colorSpace": "display-p3",
170+
"components": [0.1442, 0.2013, 0.4303],
171+
"hex": "#25336E"
172+
}
173+
},
166174
"success": {
167175
"$type": "color",
168176
"$value": {
@@ -285,6 +293,14 @@
285293
"hex": "#BAC8F0"
286294
}
287295
},
296+
"secondary": {
297+
"$type": "color",
298+
"$value": {
299+
"colorSpace": "display-p3",
300+
"components": [0.7289, 0.7853, 0.9401],
301+
"hex": "#BAC8F0"
302+
}
303+
},
288304
"success": {
289305
"$type": "color",
290306
"$value": {
@@ -1069,6 +1085,14 @@
10691085
"hex": "#BAC8F0"
10701086
}
10711087
},
1088+
"secondary": {
1089+
"$type": "color",
1090+
"$value": {
1091+
"colorSpace": "display-p3",
1092+
"components": [0.7289, 0.7853, 0.9401],
1093+
"hex": "#BAC8F0"
1094+
}
1095+
},
10721096
"success": {
10731097
"$type": "color",
10741098
"$value": {
@@ -1191,6 +1215,14 @@
11911215
"hex": "#1A2448"
11921216
}
11931217
},
1218+
"secondary": {
1219+
"$type": "color",
1220+
"$value": {
1221+
"colorSpace": "display-p3",
1222+
"components": [0.1017, 0.1411, 0.2832],
1223+
"hex": "#1A2448"
1224+
}
1225+
},
11941226
"success": {
11951227
"$type": "color",
11961228
"$value": {

‎packages/tokens/equality-tokens.pinwheel‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1425,10 +1425,12 @@
14251425
<group>
14261426
<id>3AF4332D-089A-4B0F-B382-199809A5D0F8</id>
14271427
<name>Badge</name>
1428+
<expanded>1</expanded>
14281429
<namespace>1</namespace>
14291430
<group>
14301431
<id>1B345E6F-7BFA-4A29-A8DE-903B2EB193A0</id>
14311432
<name>Text</name>
1433+
<expanded>1</expanded>
14321434
<namespace>1</namespace>
14331435
<alias>
14341436
<name>Primary</name>
@@ -1441,6 +1443,17 @@
14411443
<subIndexDark>1</subIndexDark>
14421444
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
14431445
</alias>
1446+
<alias>
1447+
<name>Secondary</name>
1448+
<type>3</type>
1449+
<typeDark>3</typeDark>
1450+
<appearance>lightanddark</appearance>
1451+
<referencedItemId>C0C0A4D2-2348-4A7F-A8D3-80FBA6568876</referencedItemId>
1452+
<subIndex>7</subIndex>
1453+
<referencedItemIdDark>C0C0A4D2-2348-4A7F-A8D3-80FBA6568876</referencedItemIdDark>
1454+
<subIndexDark>1</subIndexDark>
1455+
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
1456+
</alias>
14441457
<alias>
14451458
<name>Neutral</name>
14461459
<type>3</type>
@@ -1599,6 +1612,7 @@
15991612
<group>
16001613
<id>DA9E770F-29ED-4A78-9EDB-DD9F456BB566</id>
16011614
<name>Background</name>
1615+
<expanded>1</expanded>
16021616
<namespace>1</namespace>
16031617
<alias>
16041618
<name>Primary</name>
@@ -1611,6 +1625,17 @@
16111625
<subIndexDark>6</subIndexDark>
16121626
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
16131627
</alias>
1628+
<alias>
1629+
<name>Secondary</name>
1630+
<type>3</type>
1631+
<typeDark>3</typeDark>
1632+
<appearance>lightanddark</appearance>
1633+
<referencedItemId>C0C0A4D2-2348-4A7F-A8D3-80FBA6568876</referencedItemId>
1634+
<subIndex>1</subIndex>
1635+
<referencedItemIdDark>C0C0A4D2-2348-4A7F-A8D3-80FBA6568876</referencedItemIdDark>
1636+
<subIndexDark>6</subIndexDark>
1637+
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
1638+
</alias>
16141639
<alias>
16151640
<name>Neutral</name>
16161641
<type>3</type>
@@ -2342,6 +2367,7 @@
23422367
<group>
23432368
<id>AB837834-B6A2-4B55-BB11-D3A5D13EEE41</id>
23442369
<name>Primary</name>
2370+
<expanded>1</expanded>
23452371
<namespace>1</namespace>
23462372
<alias>
23472373
<name>Fill</name>
@@ -2552,6 +2578,7 @@
25522578
<group>
25532579
<id>C2525A18-4A97-4EEC-BE78-A03DF3113E10</id>
25542580
<name>Brand</name>
2581+
<expanded>1</expanded>
25552582
<namespace>1</namespace>
25562583
<alias>
25572584
<name>Primary</name>

‎packages/ui/src/components/badge/badge.module.css‎

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,22 @@
11
@reference '../../theme/theme.module.css';
22

33
.badge {
4-
@apply px-2 py-0.5;
5-
@apply text-xs font-medium transition-colors;
4+
@apply font-medium transition-colors;
65
@apply rounded-full;
7-
@apply flex items-center gap-1;
8-
@apply min-h-5 w-max min-w-5;
6+
@apply flex items-center;
7+
@apply w-max;
8+
}
9+
10+
/* Size Variants */
11+
12+
.badge--md {
13+
@apply px-2 py-0.5 text-xs;
14+
@apply min-h-5 min-w-5 gap-1;
15+
}
16+
17+
.badge--sm {
18+
@apply px-1 py-0 text-xs;
19+
@apply min-h-4 min-w-4 gap-0.5;
920
}
1021

1122
/* Color Variants */
@@ -15,6 +26,11 @@
1526
@apply text-badge-text-primary;
1627
}
1728

29+
.badge--secondary {
30+
@apply bg-badge-background-secondary;
31+
@apply text-badge-text-secondary;
32+
}
33+
1834
.badge--danger {
1935
@apply bg-badge-background-danger;
2036
@apply text-badge-text-danger;
@@ -42,11 +58,20 @@
4258
@apply hover:text-button-tertiary-text;
4359
}
4460

61+
.badge--sm .closable-btn {
62+
@apply size-3 [&_svg]:size-2.5;
63+
}
64+
4565
.badge--primary .closable-btn {
4666
@apply text-badge-text-primary bg-badge-background-primary;
4767
@apply hover:text-badge-background-primary hover:bg-badge-text-primary;
4868
}
4969

70+
.badge--secondary .closable-btn {
71+
@apply text-badge-text-secondary bg-badge-background-secondary;
72+
@apply hover:text-badge-background-secondary hover:bg-badge-text-secondary;
73+
}
74+
5075
.badge--danger .closable-btn {
5176
@apply text-badge-text-danger bg-badge-background-danger;
5277
@apply hover:text-badge-background-danger hover:bg-badge-text-danger;
@@ -79,6 +104,18 @@
79104
@apply text-inherit;
80105
}
81106

107+
.badge--monospace {
108+
@apply font-mono;
109+
}
110+
111+
.badge--square {
112+
@apply rounded-sm;
113+
}
114+
82115
.badge--icon-only {
83116
@apply p-1;
84117
}
118+
119+
.badge--sm.badge--icon-only {
120+
@apply p-0.5;
121+
}

0 commit comments

Comments
 (0)