Skip to content

Add monospace badge prop, secondary variant, & sm badge style #78

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Shrinks99 merged 9 commits into from
Mar 24, 2026
Merged

Add monospace badge prop, secondary variant, & sm badge style #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
259fa10
update claude settings
Shrinks99 Mar 23, 2026
c6a3bee
Add small badge size variant
Shrinks99 Mar 24, 2026
6322fd9
Add docs clarification
Shrinks99 Mar 24, 2026
3c105b1
Add monospace prop
Shrinks99 Mar 24, 2026
7ce9646
Add secondary badge variant
Shrinks99 Mar 24, 2026
da6fcd8
Merge branch 'main' into small-badges
Shrinks99 Mar 24, 2026
2a11dc6
formatting fix
Shrinks99 Mar 24, 2026
1d5cb33
typo
Shrinks99 Mar 24, 2026
afdc8bd
Add pill prop
Shrinks99 Mar 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .claude/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@
"Skill(create-documentation)",
"Skill(create-component)",
"Bash(pnpm build:*)",
"Bash(pnpm dev:*)",
"WebFetch(domain:astro.build)",
"Bash(ls:*)",
"Bash(pnpm astro check:*)",
"Bash(git stash:*)",
"Bash(curl -s http://localhost:4321/:*)"
]
Expand Down
105 changes: 89 additions & 16 deletions packages/demo/src/content/components/badge.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@ import {

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

- **Neutral:** For non-critical, informational, or secondary status.
- **Primary:** The default style, suitable for general labeling.
- **Secondary:** Use after primary but information is of secondary (or equal) importance
- **Neutral:** For non-critical, informational, or secondary status.
- **Warning:** Indicates something that is worthy of more attention.
- **Danger:** Indicates an error or danger state that requires serious attention.
- **Success:** Represents positive outcomes or completed statuses.
Expand Down Expand Up @@ -47,34 +48,81 @@ import { Badge } from "@eqtylab/equality";
<div className="grid grid-cols-[auto_auto_auto] gap-6">
<div className="flex flex-col items-start space-y-3">
<PanelLabel label="Badge Variant" />
<Badge variant="neutral">Neutral</Badge>
<Badge variant="primary">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="neutral">Neutral</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="success">Success</Badge>
</div>
<div className="flex flex-col items-start space-y-3">
<PanelLabel label="With Icons" />
<Badge variant="neutral" icon="Circle">
Neutral
</Badge>
<Badge variant="primary" icon="Shield">
Primary
</Badge>
<Badge variant="secondary" icon="Circle">
Secondary
</Badge>
<Badge variant="neutral" icon="Circle">
Neutral
</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="success">Success</Badge>
</div>
<div className="flex flex-col items-start space-y-3">
<PanelLabel label="Icon Only" />
<Badge variant="neutral" icon="Circle" display="icon-only" />
<Badge variant="primary" icon="Shield" display="icon-only" />
<Badge variant="secondary" icon="Circle" display="icon-only" />
<Badge variant="neutral" icon="Circle" display="icon-only" />
<Badge variant="warning" display="icon-only" />
<Badge variant="danger" display="icon-only" />
<Badge variant="success" display="icon-only" />
</div>
</div>

## Sizes

---

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.

<div className="flex items-center gap-3">
<Badge size="md">Medium (Default)</Badge>
<Badge size="sm" icon="Check">
Small
</Badge>
<Badge size="sm" pill={false} icon="Check">
Small square
</Badge>
</div>

### Usage

```tsx
<Badge size="md">Medium (Default)</Badge>
<Badge size="sm">Small (Square)</Badge>
<Badge size="sm" pill={false}>Small (Square)</Badge>
```

## Pill Shape

---

Badges are pill-shaped by default. Set `pill={false}` when using badges along with dense in-line text.

<div className="flex items-center gap-3">
<Badge>Pill (Default)</Badge>
<Badge pill={false}>Square</Badge>
</div>

### Usage

```tsx
<Badge>Pill (Default)</Badge>
<Badge pill={false}>Square</Badge>
```

## Display Modes

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

<BadgeTruncateDemo client:only="react" />

## Monospace

---

Use the `monospace` prop when badges will be rendered atop one another and their contents always or often share the same character count.

<div className="flex items-center gap-3">
<Badge monospace>v1.3.0</Badge>
<Badge monospace variant="success">
0x1a2b
</Badge>
<Badge monospace size="sm">
build-482
</Badge>
</div>

### Usage

```tsx
<Badge monospace>v1.3.0</Badge>
```

## Icons

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

---

| Prop | Type | Default | Description |
| ---------------- | ---------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `variant` | `"neutral"` \| `"primary"` \| `"warning"` \| `"danger"` \| `"success"` | `"primary"` | The visual style variant of the badge. |
| `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. |
| `icon` | `string` \| `ReactElement` | - | Icon to display. Can be a Lucide icon name or a custom React element. |
| `closeable` | `boolean` | `false` | When true, displays a close button on the badge. |
| `handleClosable` | `() => void` | - | Callback function called when the close button is clicked. Required when `closeable` is true. |
| `truncate` | `boolean` | `false` | When true, truncates long text with an ellipsis and shows full text on hover. |
| `truncateLength` | `number` | `50` | Maximum character length before truncation occurs. |
| `className` | `string` | - | Additional CSS classes to apply to the badge. |
| Prop | Type | Default | Description |
| ---------------- | --------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------- |
| `variant` | `"neutral"` \| `"primary"` \| `"secondary"` \| `"warning"` \| `"danger"` \| `"success"` | `"primary"` | The visual style variant of the badge. |
| `size` | `"sm"` \| `"md"` | `"md"` | The size of the badge. `"md"` renders at 20px tall, `"sm"` at 16px tall. |
| `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. |
| `icon` | `string` \| `ReactElement` | - | Icon to display. Can be a Lucide icon name or a custom React element. |
| `pill` | `boolean` | `true` | When true (default), badge is pill-shaped. Set to `false` for a square badge with subtle border radius. |
| `monospace` | `boolean` | `false` | When true, renders badge text in a monospace font. |
| `closeable` | `boolean` | `false` | When true, displays a close button on the badge. |
| `handleClosable` | `() => void` | - | Callback function called when the close button is clicked. Required when `closeable` is true. |
| `truncate` | `boolean` | `false` | When true, truncates long text with an ellipsis and shows full text on hover. |
| `truncateLength` | `number` | `50` | Maximum character length before truncation occurs. |
| `className` | `string` | - | Additional CSS classes to apply to the badge. |
32 changes: 32 additions & 0 deletions packages/tokens/equality-tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,14 @@
"hex": "#25336E"
}
},
"secondary": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.1442, 0.2013, 0.4303],
"hex": "#25336E"
}
},
"success": {
"$type": "color",
"$value": {
Expand Down Expand Up @@ -285,6 +293,14 @@
"hex": "#BAC8F0"
}
},
"secondary": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.7289, 0.7853, 0.9401],
"hex": "#BAC8F0"
}
},
"success": {
"$type": "color",
"$value": {
Expand Down Expand Up @@ -1069,6 +1085,14 @@
"hex": "#BAC8F0"
}
},
"secondary": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.7289, 0.7853, 0.9401],
"hex": "#BAC8F0"
}
},
"success": {
"$type": "color",
"$value": {
Expand Down Expand Up @@ -1191,6 +1215,14 @@
"hex": "#1A2448"
}
},
"secondary": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.1017, 0.1411, 0.2832],
"hex": "#1A2448"
}
},
"success": {
"$type": "color",
"$value": {
Expand Down
27 changes: 27 additions & 0 deletions packages/tokens/equality-tokens.pinwheel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1425,10 +1425,12 @@
<group>
<id>3AF4332D-089A-4B0F-B382-199809A5D0F8</id>
<name>Badge</name>
<expanded>1</expanded>
<namespace>1</namespace>
<group>
<id>1B345E6F-7BFA-4A29-A8DE-903B2EB193A0</id>
<name>Text</name>
<expanded>1</expanded>
<namespace>1</namespace>
<alias>
<name>Primary</name>
Expand All @@ -1441,6 +1443,17 @@
<subIndexDark>1</subIndexDark>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
<alias>
<name>Secondary</name>
<type>3</type>
<typeDark>3</typeDark>
<appearance>lightanddark</appearance>
<referencedItemId>C0C0A4D2-2348-4A7F-A8D3-80FBA6568876</referencedItemId>
<subIndex>7</subIndex>
<referencedItemIdDark>C0C0A4D2-2348-4A7F-A8D3-80FBA6568876</referencedItemIdDark>
<subIndexDark>1</subIndexDark>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
<alias>
<name>Neutral</name>
<type>3</type>
Expand Down Expand Up @@ -1599,6 +1612,7 @@
<group>
<id>DA9E770F-29ED-4A78-9EDB-DD9F456BB566</id>
<name>Background</name>
<expanded>1</expanded>
<namespace>1</namespace>
<alias>
<name>Primary</name>
Expand All @@ -1611,6 +1625,17 @@
<subIndexDark>6</subIndexDark>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
<alias>
<name>Secondary</name>
<type>3</type>
<typeDark>3</typeDark>
<appearance>lightanddark</appearance>
<referencedItemId>C0C0A4D2-2348-4A7F-A8D3-80FBA6568876</referencedItemId>
<subIndex>1</subIndex>
<referencedItemIdDark>C0C0A4D2-2348-4A7F-A8D3-80FBA6568876</referencedItemIdDark>
<subIndexDark>6</subIndexDark>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
<alias>
<name>Neutral</name>
<type>3</type>
Expand Down Expand Up @@ -2342,6 +2367,7 @@
<group>
<id>AB837834-B6A2-4B55-BB11-D3A5D13EEE41</id>
<name>Primary</name>
<expanded>1</expanded>
<namespace>1</namespace>
<alias>
<name>Fill</name>
Expand Down Expand Up @@ -2552,6 +2578,7 @@
<group>
<id>C2525A18-4A97-4EEC-BE78-A03DF3113E10</id>
<name>Brand</name>
<expanded>1</expanded>
<namespace>1</namespace>
<alias>
<name>Primary</name>
Expand Down
45 changes: 41 additions & 4 deletions packages/ui/src/components/badge/badge.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,22 @@
@reference '../../theme/theme.module.css';

.badge {
@apply px-2 py-0.5;
@apply text-xs font-medium transition-colors;
@apply font-medium transition-colors;
@apply rounded-full;
@apply flex items-center gap-1;
@apply min-h-5 w-max min-w-5;
@apply flex items-center;
@apply w-max;
}

/* Size Variants */

.badge--md {
@apply px-2 py-0.5 text-xs;
@apply min-h-5 min-w-5 gap-1;
}

.badge--sm {
@apply px-1 py-0 text-xs;
@apply min-h-4 min-w-4 gap-0.5;
}

/* Color Variants */
Expand All @@ -15,6 +26,11 @@
@apply text-badge-text-primary;
}

.badge--secondary {
@apply bg-badge-background-secondary;
@apply text-badge-text-secondary;
}

.badge--danger {
@apply bg-badge-background-danger;
@apply text-badge-text-danger;
Expand Down Expand Up @@ -42,11 +58,20 @@
@apply hover:text-button-tertiary-text;
}

.badge--sm .closable-btn {
@apply size-3 [&_svg]:size-2.5;
}

.badge--primary .closable-btn {
@apply text-badge-text-primary bg-badge-background-primary;
@apply hover:text-badge-background-primary hover:bg-badge-text-primary;
}

.badge--secondary .closable-btn {
@apply text-badge-text-secondary bg-badge-background-secondary;
@apply hover:text-badge-background-secondary hover:bg-badge-text-secondary;
}

.badge--danger .closable-btn {
@apply text-badge-text-danger bg-badge-background-danger;
@apply hover:text-badge-background-danger hover:bg-badge-text-danger;
Expand Down Expand Up @@ -79,6 +104,18 @@
@apply text-inherit;
}

.badge--monospace {
@apply font-mono;
}

.badge--square {
@apply rounded-sm;
}

.badge--icon-only {
@apply p-1;
}

.badge--sm.badge--icon-only {
@apply p-0.5;
}
Loading
Loading