Skip to content

feat: add accessible closeLabel prop to Badge close button #108

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
tmccoy14 merged 3 commits into from
Jul 6, 2026
Merged

feat: add accessible closeLabel prop to Badge close button #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
37a0e09
feat: add accessible closeLabel prop to Badge close button
tmccoy14 Jul 6, 2026
2f9d609
feat: add closeLabel prop and harden Badge close button
tmccoy14 Jul 6, 2026
a14aeba
feat: add closeLabel prop and harden Badge close button
tmccoy14 Jul 6, 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
27 changes: 14 additions & 13 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 @@ -202,16 +202,17 @@ You can enhance your badge by displaying an icon. The `icon` prop accepts either

## Props

| 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. |
| 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. Provide this whenever `closeable` is true, otherwise the button is a no-op. |
Comment thread
tmccoy14 marked this conversation as resolved.
| `closeLabel` | `string` | `"Remove"` | Accessible label (`aria-label`) for the close button. Used by screen readers to describe the action. |
| `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. |
15 changes: 8 additions & 7 deletions packages/demo/src/content/components/resource-badge.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,10 +166,11 @@ Set `closeable` and provide a `handleClosable` callback to render a close button

## Props

| Name | Description | Type | Default | Required |
| ---------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- |
| `type` | The resource type that determines the badge variant, icon, and label. | `"agent"`, `"benchmark"`, `"benchmark-result"`, `"binary"`, `"certificate"`, `"code"`, `"compute"`, `"config"`, `"credential"`, `"database"`, `"dataset"`, `"document"`, `"guardrail"`, `"media"`, `"model"`, `"prompt"`, `"reasoning"`, `"skill"`, `"system-prompt"`, `"token"`, `"tool"`, `"unknown"` | | ✅ |
| `display` | Controls what elements are displayed: icon, text, or both. | `"both"`, `"text-only"`, `"icon-only"` | `"both"` | ❌ |
| `children` | Custom content to display in place of the default type label. | `ReactNode` | | ❌ |
| `closeable` | When true, displays a close button on the badge. | `boolean` | `false` | ❌ |
| `handleClosable` | Callback called when the close button is clicked. | `() => void` | | ❌ |
| Name | Description | Type | Default | Required |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------- |
| `type` | The resource type that determines the badge variant, icon, and label. | `"agent"`, `"benchmark"`, `"benchmark-result"`, `"binary"`, `"certificate"`, `"code"`, `"compute"`, `"config"`, `"credential"`, `"database"`, `"dataset"`, `"document"`, `"guardrail"`, `"media"`, `"model"`, `"prompt"`, `"reasoning"`, `"skill"`, `"system-prompt"`, `"token"`, `"tool"`, `"unknown"` | | ✅ |
| `display` | Controls what elements are displayed: icon, text, or both. | `"both"`, `"text-only"`, `"icon-only"` | `"both"` | ❌ |
| `children` | Custom content to display in place of the default type label. | `ReactNode` | | ❌ |
| `closeable` | When true, displays a close button on the badge. | `boolean` | `false` | ❌ |
| `handleClosable` | Callback called when the close button is clicked. Provide this whenever `closeable` is true, otherwise the button is a no-op. | `() => void` | | ❌ |
| `closeLabel` | Accessible label (`aria-label`) for the close button. | `string` | `"Remove"` | ❌ |
2 changes: 1 addition & 1 deletion packages/ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@eqtylab/equality",
"description": "EQTYLab's component and token-based design system",
"homepage": "https://equality.eqtylab.io/",
"version": "2.2.1",
"version": "2.2.2",
"license": "Apache-2.0",
"keywords": [
"component library",
Expand Down
27 changes: 15 additions & 12 deletions packages/ui/src/components/badge/badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
closeable?: boolean;
handleClosable?: () => void;
closeLabel?: string;
truncate?: boolean;
truncateLength?: number;
icon?: React.ReactElement | string;
Expand All @@ -63,6 +64,7 @@ function Badge({
size,
closeable,
handleClosable,
closeLabel = 'Remove',
truncate = false,
truncateLength = 50,
icon,
Expand All @@ -75,18 +77,19 @@ function Badge({
const effectiveIcon = icon ?? (variant ? defaultVariantIcons[variant] : undefined);

const renderClosable = () => {
if (closeable && handleClosable)
return (
<Button
variant="tertiary"
size="sm"
onClick={handleClosable}
className={styles['closable-btn']}
>
<XIcon />
</Button>
);
return null;
if (!closeable) return null;
return (
<Button
type="button"
Comment thread
tmccoy14 marked this conversation as resolved.
variant="tertiary"
size="sm"
onClick={handleClosable}
aria-label={closeLabel}
className={styles['closable-btn']}
>
Comment thread
tmccoy14 marked this conversation as resolved.
<XIcon />
</Button>
);
};

const renderChildren = () => {
Expand Down
3 changes: 3 additions & 0 deletions packages/ui/src/components/resource-badge/resource-badge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ interface ResourceBadgeProps {
display?: ResourceDisplayMode;
closeable?: boolean;
handleClosable?: () => void;
closeLabel?: string;
children?: React.ReactNode;
}

Expand All @@ -45,6 +46,7 @@ const ResourceBadge = ({
display = 'both',
closeable,
handleClosable,
closeLabel,
children,
}: ResourceBadgeProps) => {
const config = getTypeConfig(type);
Expand All @@ -57,6 +59,7 @@ const ResourceBadge = ({
variant={null}
closeable={closeable}
handleClosable={handleClosable}
closeLabel={closeLabel}
>
{children ?? config.label}
</Badge>
Expand Down
Loading