Skip to content

feat(button): add a warning variant, and text and button warning tokens #129

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 4 commits into from
Sep 3, 2026
Merged

feat(button): add a warning variant, and text and button warning tokens #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4a15d0f
feat(button): add a warning variant, and text and button warning tokens
tmccoy14 Sep 2, 2026
707596f
Rebuild tokens out of pinwheel
Shrinks99 Sep 3, 2026
b2e7cdd
Increase button colour vibrance
Shrinks99 Sep 3, 2026
c33e4ad
Add warning variant to dropdown-menu
Shrinks99 Sep 3, 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
26 changes: 26 additions & 0 deletions packages/demo/src/components/demo/dropdown-menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export const DropdownMenuDemo = ({
}: {
variant?:
| "default"
| "item-variants"
| "with-separators"
| "with-checkboxes"
| "with-radio"
Expand Down Expand Up @@ -92,6 +93,31 @@ export const DropdownMenuDemo = ({
);
}

if (variant === "item-variants") {
return (
<div style={{ margin: "1rem 0" }}>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button size="sm" variant="tertiary">
Manage Deployment
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start">
<DropdownMenuItem>View logs</DropdownMenuItem>
<DropdownMenuItem>Duplicate</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="warning">
Roll back to previous release
</DropdownMenuItem>
<DropdownMenuItem variant="danger">
Delete deployment
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
);
}

if (variant === "with-separators") {
return (
<div style={{ margin: "1rem 0" }}>
Expand Down
43 changes: 31 additions & 12 deletions packages/demo/src/content/components/button.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,25 @@ Use the `danger` variant For destructive actions like delete or remove.
</div>
}

### Warning

Use the `warning` variant for actions the user should pause over but that are not destructive, such as archiving something that can be restored later. Reserve `danger` for actions that cannot be undone.

{

<div className="flex gap-2">
<Button variant="warning" size="lg">
Warning LG
</Button>
<Button variant="warning" size="md">
Warning MD
</Button>
<Button variant="warning" size="sm">
Warning SM
</Button>
</div>
}

### Link

Use the `link` variant for buttons that should be styled as a link but with button semantics.
Expand Down Expand Up @@ -243,15 +262,15 @@ Buttons tagged with the `disabled` property are non-interactive and visually mut

## Props

| Name | Description | Type | Default | Required |
| ---------- | ------------------------------------------------ | ------------------------------------------------------------------ | --------- | -------- |
| `variant` | The visual style of the button | `primary`, `secondary`, `tertiary`, `danger`, `link`, `navigation` | `primary` | ❌ |
| `size` | The size of the button | `sm`, `md`, `lg` | `md` | ❌ |
| `prefix` | Content to display before the button label | `ReactNode` | - | ❌ |
| `suffix` | Content to display after the button label | `ReactNode` | - | ❌ |
| `href` | URL for link buttons (renders as anchor element) | `string` | - | ❌ |
| `target` | Link target (when href is provided) | `string` | - | ❌ |
| `rel` | Link rel attribute (when href is provided) | `string` | - | ❌ |
| `download` | Makes link downloadable (when href is provided) | `string`, `boolean` | - | ❌ |
| `asChild` | Merge props onto child element | `boolean` | `false` | ❌ |
| `disabled` | Disables the button | `boolean` | `false` | ❌ |
| Name | Description | Type | Default | Required |
| ---------- | ------------------------------------------------ | ----------------------------------------------------------------------------- | --------- | -------- |
| `variant` | The visual style of the button | `primary`, `secondary`, `tertiary`, `danger`, `warning`, `link`, `navigation` | `primary` | ❌ |
| `size` | The size of the button | `sm`, `md`, `lg` | `md` | ❌ |
| `prefix` | Content to display before the button label | `ReactNode` | - | ❌ |
| `suffix` | Content to display after the button label | `ReactNode` | - | ❌ |
| `href` | URL for link buttons (renders as anchor element) | `string` | - | ❌ |
| `target` | Link target (when href is provided) | `string` | - | ❌ |
| `rel` | Link rel attribute (when href is provided) | `string` | - | ❌ |
| `download` | Makes link downloadable (when href is provided) | `string`, `boolean` | - | ❌ |
| `asChild` | Merge props onto child element | `boolean` | `false` | ❌ |
| `disabled` | Disables the button | `boolean` | `false` | ❌ |
34 changes: 27 additions & 7 deletions packages/demo/src/content/components/dropdown-menu.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,26 @@ Basic usage:

## Variants

### Item Variants

`DropdownMenuItem` takes a `variant` to mark an action's weight. Use `danger` for destructive or irreversible actions, and `warning` for actions that are consequential but recoverable — something the user should pause over rather than avoid. Leave everything else `neutral`.

Colour alone shouldn't carry the meaning, so keep the label explicit about what the action does.

<DropdownMenuDemo client:only="react" variant="item-variants" />

```jsx
<DropdownMenuContent align="start">
<DropdownMenuItem>View logs</DropdownMenuItem>
<DropdownMenuItem>Duplicate</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="warning">
Roll back to previous release
</DropdownMenuItem>
<DropdownMenuItem variant="danger">Delete deployment</DropdownMenuItem>
</DropdownMenuContent>
```

### With Separators and Labels

Use `DropdownMenuLabel` to title a section and `DropdownMenuSeparator` to divide groups of items. Items accept icons as children alongside a `<span>` label.
Expand Down Expand Up @@ -321,13 +341,13 @@ Flattening only works when `DropdownMenuSubContent` is placed directly inside `D

### DropdownMenuItem

| Name | Description | Type | Default | Required |
| ----------- | ---------------------------------------------------------------------- | ------------------- | --------- | -------- |
| `variant` | Visual style; `danger` marks a destructive action | `neutral`, `danger` | `neutral` | ❌ |
| `inset` | Adds left padding to align with items that have icons | `boolean` | `false` | ❌ |
| `disabled` | Prevents interaction and dims the item | `boolean` | `false` | ❌ |
| `textValue` | Text used for search filtering; falls back to the item's rendered text | `string` | - | ❌ |
| `onSelect` | Called when the item is selected | `() => void` | - | ❌ |
| Name | Description | Type | Default | Required |
| ----------- | -------------------------------------------------------------------------------- | ------------------------------ | --------- | -------- |
| `variant` | Visual style; `warning` marks a consequential action, `danger` a destructive one | `neutral`, `warning`, `danger` | `neutral` | ❌ |
| `inset` | Adds left padding to align with items that have icons | `boolean` | `false` | ❌ |
| `disabled` | Prevents interaction and dims the item | `boolean` | `false` | ❌ |
| `textValue` | Text used for search filtering; falls back to the item's rendered text | `string` | - | ❌ |
| `onSelect` | Called when the item is selected | `() => void` | - | ❌ |

### DropdownMenuCheckboxItem

Expand Down
72 changes: 66 additions & 6 deletions packages/tokens/equality-tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,8 +389,8 @@
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.8114, 0.4167, 0.3761],
"hex": "#CF6A60"
"components": [0.7365, 0.2216, 0.2026],
"hex": "#BC3934"
}
}
},
Expand All @@ -399,16 +399,16 @@
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.6266, 0.4562, 0.8302],
"hex": "#A074D4"
"components": [0.5242, 0.2903, 0.7705],
"hex": "#864AC4"
}
},
"fill": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.6266, 0.4562, 0.8302],
"hex": "#A074D4"
"components": [0.5242, 0.2903, 0.7705],
"hex": "#864AC4"
}
}
},
Expand Down Expand Up @@ -463,6 +463,24 @@
"hex": "#FFFFFF"
}
}
},
"warning": {
"border": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.8263, 0.6154, 0.2247],
"hex": "#D39D39"
}
},
"fill": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.8263, 0.6154, 0.2247],
"hex": "#D39D39"
}
}
}
},
"card": {
Expand Down Expand Up @@ -915,6 +933,14 @@
"components": [0.5021, 0.5021, 0.5021],
"hex": "#808080"
}
},
"warning": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.863, 0.6958, 0.4108],
"hex": "#DCB169"
}
}
}
}
Expand Down Expand Up @@ -1597,6 +1623,32 @@
"hex": "#000000"
}
}
},
"warning": {
"border": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.6345, 0.463, 0.1863],
"hex": "#A27630"
}
},
"fill": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.8263, 0.6154, 0.2247],
"hex": "#D39D39"
}
},
"text": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [1, 1, 1],
"hex": "#FFFFFF"
}
}
}
},
"card": {
Expand Down Expand Up @@ -2973,6 +3025,14 @@
"components": [0.5021, 0.5021, 0.5021],
"hex": "#808080"
}
},
"warning": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
"components": [0.8263, 0.6154, 0.2247],
"hex": "#D39D39"
}
}
},
"white": {
Expand Down
53 changes: 50 additions & 3 deletions packages/tokens/equality-tokens.pinwheel
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2478,6 +2478,7 @@
<group>
<id>792303FE-20DD-4519-88B7-A3D74D43A65A</id>
<name>Button</name>
<expanded>1</expanded>
<namespace>1</namespace>
<group>
<id>AB837834-B6A2-4B55-BB11-D3A5D13EEE41</id>
Expand All @@ -2492,7 +2493,7 @@
<referencedItemId>68A1562E-D9B7-40A5-BFB2-31353FD45D3D</referencedItemId>
<subIndex>4</subIndex>
<referencedItemIdDark>68A1562E-D9B7-40A5-BFB2-31353FD45D3D</referencedItemIdDark>
<subIndexDark>3</subIndexDark>
<subIndexDark>4</subIndexDark>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
<alias>
Expand All @@ -2503,7 +2504,7 @@
<referencedItemId>68A1562E-D9B7-40A5-BFB2-31353FD45D3D</referencedItemId>
<subIndex>4</subIndex>
<referencedItemIdDark>68A1562E-D9B7-40A5-BFB2-31353FD45D3D</referencedItemIdDark>
<subIndexDark>3</subIndexDark>
<subIndexDark>4</subIndexDark>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
<alias>
Expand Down Expand Up @@ -2585,6 +2586,7 @@
<group>
<id>65EF707B-201E-41DA-9727-B23B74706082</id>
<name>Danger</name>
<expanded>1</expanded>
<namespace>1</namespace>
<alias>
<name>Fill</name>
Expand All @@ -2594,7 +2596,7 @@
<referencedItemId>CCD80E1D-24ED-4193-A845-891C968555AF</referencedItemId>
<subIndex>4</subIndex>
<referencedItemIdDark>CCD80E1D-24ED-4193-A845-891C968555AF</referencedItemIdDark>
<subIndexDark>3</subIndexDark>
<subIndexDark>4</subIndexDark>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
<alias>
Expand All @@ -2615,6 +2617,40 @@
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
</group>
<group>
<id>5A31F3CF-7D77-4209-8306-BE84DCD28B3C</id>
<name>Warning</name>
<expanded>1</expanded>
<namespace>1</namespace>
<alias>
<name>Fill</name>
<type>3</type>
<typeDark>3</typeDark>
<appearance>lightanddark</appearance>
<referencedItemId>BB783E8C-1914-4094-BE1D-37E41EB42641</referencedItemId>
<subIndex>4</subIndex>
<referencedItemIdDark>BB783E8C-1914-4094-BE1D-37E41EB42641</referencedItemIdDark>
<subIndexDark>4</subIndexDark>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
<alias>
<name>Border</name>
<type>3</type>
<typeDark>3</typeDark>
<appearance>lightanddark</appearance>
<referencedItemId>BB783E8C-1914-4094-BE1D-37E41EB42641</referencedItemId>
<subIndex>5</subIndex>
<referencedItemIdDark>BB783E8C-1914-4094-BE1D-37E41EB42641</referencedItemIdDark>
<subIndexDark>4</subIndexDark>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
<alias>
<name>Text</name>
<type>1</type>
<referencedItemId>9FC81FBB-965B-40C5-A7D2-A5F365863FE4</referencedItemId>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
</group>
</group>
<group>
<id>4EC67953-4547-4883-B947-D73CF2D3DF18</id>
Expand Down Expand Up @@ -2674,6 +2710,17 @@
<subIndexDark>3</subIndexDark>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
<alias>
<name>Warning</name>
<type>3</type>
<typeDark>3</typeDark>
<appearance>lightanddark</appearance>
<referencedItemId>BB783E8C-1914-4094-BE1D-37E41EB42641</referencedItemId>
<subIndex>4</subIndex>
<referencedItemIdDark>BB783E8C-1914-4094-BE1D-37E41EB42641</referencedItemIdDark>
<subIndexDark>3</subIndexDark>
<buildGroupId>86B9D7D8-F74A-4CAE-B006-65451BBEDAB9</buildGroupId>
</alias>
</group>
<group>
<id>635BED27-D972-4FC5-BD7E-AE05C08B92FD</id>
Expand Down
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": "3.2.6",
"version": "3.3.0",
"license": "Apache-2.0",
"keywords": [
"component library",
Expand Down
10 changes: 10 additions & 0 deletions packages/ui/src/components/button/button.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,16 @@
@apply hover:not-disabled:bg-mixed-dark;
}

/* Yellow is too light to carry white text, so this is the one filled variant with dark text */
.button--warning {
--mix-color: var(--color-button-warning-fill);
@apply bg-(--mix-color);
@apply border-button-warning-border border;
@apply text-button-warning-text;
@apply no-underline;
@apply hover:not-disabled:bg-mixed-dark;
}

.button--secondary {
--mix-color: var(--color-button-secondary-fill);
@apply bg-(--mix-color);
Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/components/button/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const buttonVariants = cva(styles['button'], {
variant: {
primary: styles['button--primary'],
danger: styles['button--danger'],
warning: styles['button--warning'],
secondary: styles['button--secondary'],
tertiary: styles['button--tertiary'],
link: styles['button--link'],
Expand Down
Loading
Loading