Skip to content

fix(button): Update button styles to align with Figma #53

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

Closed
CiscoFran10 wants to merge 1 commit into from
Closed

fix(button): Update button styles to align with Figma #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions .changeset/ten-houses-switch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@cloudflare/kumo": patch
---

Update Button styles to align with Figma
44 changes: 21 additions & 23 deletions packages/kumo/ai/component-registry.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,10 +281,10 @@
"lg": "Large button for primary CTAs"
},
"classes": {
"xs": "h-5 gap-1 rounded-sm px-1.5 text-xs",
"sm": "h-6.5 gap-1 rounded-md px-2 text-xs",
"base": "h-9 gap-1.5 rounded-lg px-3 text-base",
"lg": "h-10 gap-2 rounded-lg px-4 text-base"
"xs": "h-5 gap-1 px-1.5 rounded-sm text-xs",
"sm": "h-6.5 gap-1 px-2 rounded-md text-xs",
"base": "h-9 gap-1.5 px-3 rounded-lg text-base",
"lg": "h-10 gap-2 px-4 rounded-lg text-base"
},
"default": "base"
},
Expand All @@ -308,33 +308,31 @@
"outline": "Bordered button with transparent background"
},
"classes": {
"primary": "bg-kumo-brand !text-white hover:bg-kumo-brand-hover focus:bg-kumo-brand-hover disabled:bg-kumo-brand/50",
"secondary": "bg-kumo-control !text-kumo-default ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-control disabled:bg-kumo-control/50 disabled:!text-kumo-default/70 ring-kumo-line data-[state=open]:bg-kumo-control",
"ghost": "text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit",
"destructive": "bg-kumo-danger !text-white hover:bg-kumo-danger/70",
"secondary-destructive": "bg-kumo-control !text-kumo-danger ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-control disabled:bg-kumo-control/50 disabled:!text-kumo-danger/70 ring-kumo-line data-[state=open]:bg-kumo-control",
"outline": "bg-kumo-base text-kumo-default ring ring-kumo-line"
"primary": "bg-kumo-brand text-white not-disabled:[:hover,:focus-visible,[data-pressed]]:bg-kumo-brand-hover",
"secondary": "bg-kumo-control text-kumo-default ring ring-kumo-line shadow-none not-disabled:not-data-pressed:hover:ring-kumo-control",
"ghost": "bg-inherit text-kumo-default shadow-none not-disabled:[:hover,[data-pressed]]:bg-kumo-tint",
"destructive": "bg-kumo-danger text-white shadow-none not-disabled:[:hover,[data-pressed]]:bg-kumo-danger/70",
"secondary-destructive": "bg-kumo-control text-kumo-danger ring ring-kumo-line shadow-none not-disabled:not-data-pressed:hover:ring-kumo-control",
"outline": "bg-kumo-base text-kumo-default ring ring-kumo-line not-disabled:[:hover,[data-pressed]]:bg-kumo-control data-[state=open]:bg-kumo-control"
},
"stateClasses": {
"primary": {
"hover": "hover:bg-kumo-brand-hover",
"focus": "focus:bg-kumo-brand-hover",
"disabled": "disabled:bg-kumo-brand/50"
"not-disabled": "not-disabled:[:hover,:focus-visible,[data-pressed]]:bg-kumo-brand-hover"
},
"secondary": {
"not-disabled": "not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-control",
"disabled": "disabled:bg-kumo-control/50 disabled:!text-kumo-default/70",
"data-state": "data-[state=open]:bg-kumo-control"
"not-disabled": "not-disabled:not-data-pressed:hover:ring-kumo-control"
},
"ghost": {
"hover": "hover:bg-kumo-tint"
"not-disabled": "not-disabled:[:hover,[data-pressed]]:bg-kumo-tint"
},
"destructive": {
"hover": "hover:bg-kumo-danger/70"
"not-disabled": "not-disabled:[:hover,[data-pressed]]:bg-kumo-danger/70"
},
"secondary-destructive": {
"not-disabled": "not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-control",
"disabled": "disabled:bg-kumo-control/50 disabled:!text-kumo-danger/70",
"not-disabled": "not-disabled:not-data-pressed:hover:ring-kumo-control"
},
"outline": {
"not-disabled": "not-disabled:[:hover,[data-pressed]]:bg-kumo-control",
"data-state": "data-[state=open]:bg-kumo-control"
}
},
Expand Down Expand Up @@ -395,11 +393,11 @@
"bg-kumo-control",
"bg-kumo-danger",
"bg-kumo-tint",
"ring-kumo-brand",
"ring-kumo-control",
"ring-kumo-line",
"ring-kumo-ring",
"text-kumo-danger",
"text-kumo-default",
"text-kumo-subtle"
"text-kumo-default"
]
},
"Checkbox": {
Expand Down
19 changes: 8 additions & 11 deletions packages/kumo/ai/component-registry.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,20 +248,17 @@ Button component

**State Classes:**
- `"primary"`:
- `hover`: `hover:bg-kumo-brand-hover`
- `focus`: `focus:bg-kumo-brand-hover`
- `disabled`: `disabled:bg-kumo-brand/50`
- `not-disabled`: `not-disabled:[:hover,:focus-visible,[data-pressed]]:bg-kumo-brand-hover`
- `"secondary"`:
- `not-disabled`: `not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-control`
- `disabled`: `disabled:bg-kumo-control/50 disabled:!text-kumo-default/70`
- `data-state`: `data-[state=open]:bg-kumo-control`
- `not-disabled`: `not-disabled:not-data-pressed:hover:ring-kumo-control`
- `"ghost"`:
- `hover`: `hover:bg-kumo-tint`
- `not-disabled`: `not-disabled:[:hover,[data-pressed]]:bg-kumo-tint`
- `"destructive"`:
- `hover`: `hover:bg-kumo-danger/70`
- `not-disabled`: `not-disabled:[:hover,[data-pressed]]:bg-kumo-danger/70`
- `"secondary-destructive"`:
- `not-disabled`: `not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-control`
- `disabled`: `disabled:bg-kumo-control/50 disabled:!text-kumo-danger/70`
- `not-disabled`: `not-disabled:not-data-pressed:hover:ring-kumo-control`
- `"outline"`:
- `not-disabled`: `not-disabled:[:hover,[data-pressed]]:bg-kumo-control`
- `data-state`: `data-[state=open]:bg-kumo-control`
- `id`: string
- `lang`: string
Expand All @@ -273,7 +270,7 @@ Button component

**Colors (kumo tokens used):**

`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-brand-hover`, `bg-kumo-control`, `bg-kumo-danger`, `bg-kumo-tint`, `ring-kumo-line`, `ring-kumo-ring`, `text-kumo-danger`, `text-kumo-default`, `text-kumo-subtle`
`bg-kumo-base`, `bg-kumo-brand`, `bg-kumo-brand-hover`, `bg-kumo-control`, `bg-kumo-danger`, `bg-kumo-tint`, `ring-kumo-brand`, `ring-kumo-control`, `ring-kumo-line`, `text-kumo-danger`, `text-kumo-default`

**Examples:**

Expand Down
6 changes: 6 additions & 0 deletions packages/kumo/scripts/component-registry/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,12 @@ export function extractStateClasses(
? `${states["data-state"]} ${cls}`
: cls;
}
// Check for data-pressed
else if (cls.match(/^data-\[pressed\]:/)) {
states["data-pressed"] = states["data-pressed"]
? `${states["data-pressed"]} ${cls}`
: cls;
}
}

return states;
Expand Down
41 changes: 22 additions & 19 deletions packages/kumo/src/components/button/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import { ArrowsClockwise, type Icon } from "@phosphor-icons/react";
import { ArrowsClockwiseIcon, type Icon } from "@phosphor-icons/react";
import { Loader } from "../loader/loader";
import { cn } from "../../utils/cn";
import { useLinkComponent } from "../../utils/link-provider";
Expand All @@ -21,55 +21,58 @@ export const KUMO_BUTTON_VARIANTS = {
},
size: {
xs: {
classes: "h-5 gap-1 rounded-sm px-1.5 text-xs",
classes: "h-5 gap-1 px-1.5 rounded-sm text-xs",
description: "Extra small button for compact UIs",
},
sm: {
classes: "h-6.5 gap-1 rounded-md px-2 text-xs",
classes: "h-6.5 gap-1 px-2 rounded-md text-xs",
description: "Small button for secondary actions",
},
base: {
classes: "h-9 gap-1.5 rounded-lg px-3 text-base",
classes: "h-9 gap-1.5 px-3 rounded-lg text-base",
description: "Default button size",
},
lg: {
classes: "h-10 gap-2 rounded-lg px-4 text-base",
classes: "h-10 gap-2 px-4 rounded-lg text-base",
description: "Large button for primary CTAs",
},
},
compactSize: {
xs: { classes: "size-3.5" },
sm: { classes: "size-6.5" },
base: { classes: "size-9" },
lg: { classes: "size-10" },
xs: { classes: "size-3.5 [&_svg:not([class*='size-'])]:size-3" },
sm: { classes: "size-6.5 [&_svg:not([class*='size-'])]:size-4" },
base: { classes: "size-9 [&_svg:not([class*='size-'])]:size-5" },
lg: { classes: "size-10 [&_svg:not([class*='size-'])]:size-5" },
},
variant: {
primary: {
classes:
"bg-kumo-brand !text-white hover:bg-kumo-brand-hover focus:bg-kumo-brand-hover disabled:bg-kumo-brand/50",
"bg-kumo-brand text-white not-disabled:[:hover,:focus-visible,[data-pressed]]:bg-kumo-brand-hover",
description: "High-emphasis button for primary actions",
},
secondary: {
classes:
"bg-kumo-control !text-kumo-default ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-control disabled:bg-kumo-control/50 disabled:!text-kumo-default/70 ring-kumo-line data-[state=open]:bg-kumo-control",
"bg-kumo-control text-kumo-default ring ring-kumo-line shadow-none not-disabled:not-data-pressed:hover:ring-kumo-control",
description: "Default button style for most actions",
},
ghost: {
classes: "text-kumo-default hover:bg-kumo-tint shadow-none bg-inherit",
classes:
"bg-inherit text-kumo-default shadow-none not-disabled:[:hover,[data-pressed]]:bg-kumo-tint",
description: "Minimal button with no background",
},
destructive: {
classes: "bg-kumo-danger !text-white hover:bg-kumo-danger/70",
classes:
"bg-kumo-danger text-white shadow-none not-disabled:[:hover,[data-pressed]]:bg-kumo-danger/70",
description: "Danger button for destructive actions like delete",
},
"secondary-destructive": {
classes:
"bg-kumo-control !text-kumo-danger ring not-disabled:hover:border-secondary! not-disabled:hover:bg-kumo-control disabled:bg-kumo-control/50 disabled:!text-kumo-danger/70 ring-kumo-line data-[state=open]:bg-kumo-control",
"bg-kumo-control text-kumo-danger ring ring-kumo-line shadow-none not-disabled:not-data-pressed:hover:ring-kumo-control",
description:
"Secondary button with destructive text for less prominent dangerous actions",
},
outline: {
classes: "bg-kumo-base text-kumo-default ring ring-kumo-line",
classes:
"bg-kumo-base text-kumo-default ring ring-kumo-line not-disabled:[:hover,[data-pressed]]:bg-kumo-control data-[state=open]:bg-kumo-control",
Copy link
Copy Markdown
Contributor Author

@CiscoFran10 CiscoFran10 Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In light mode, the kumo-control and kumo-base colors are identical, which makes the hover state visually indistinguishable. This likely needs an update to the light-mode Figma styles. Waiting for maintainer guidance before proceeding.

description: "Bordered button with transparent background",
},
},
Expand Down Expand Up @@ -101,11 +104,11 @@ export function buttonVariants({

return cn(
// Base styles
"group flex w-max shrink-0 items-center font-medium select-none",
"group flex w-max shrink-0 items-center font-medium select-none [&_svg]:shrink-0 [&_svg]:-mx-0.5",
Copy link
Copy Markdown
Contributor Author

@CiscoFran10 CiscoFran10 Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[&_svg]:-mx-0.5

Minor optical alignment adjustment for SVG icons next to text.

"border-0 shadow-xs",
"cursor-pointer",
// Disabled state
"disabled:cursor-not-allowed disabled:text-kumo-subtle",
"disabled:cursor-not-allowed",
// Apply variant, size, shape styles from KUMO_BUTTON_VARIANTS
KUMO_BUTTON_VARIANTS.variant[variant].classes,
KUMO_BUTTON_VARIANTS.size[size].classes,
Expand Down Expand Up @@ -160,7 +163,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
ref={ref}
className={cn(
buttonVariants({ variant, size, shape }),
"outline-none focus:opacity-100 focus-visible:ring-1 focus-visible:ring-kumo-ring *:in-focus:opacity-100", // Focus styles
"outline-none focus:opacity-100 focus-visible:ring-2 focus-visible:ring-kumo-brand *:in-focus:opacity-100", // Focus styles
disabled && "cursor-not-allowed opacity-50",
className,
)}
Expand All @@ -185,7 +188,7 @@ export const RefreshButton = ({
...props
}: ButtonProps) => (
<Button shape="square" aria-label={ariaLabel} {...props}>
<ArrowsClockwise
<ArrowsClockwiseIcon
className={cn({
"animate-refresh": loading,
"size-4.5": props.size === "base" || !props.size,
Expand Down