From cedb0432518041e7646ddcea59664a05c7232c63 Mon Sep 17 00:00:00 2001 From: Kate Scherz Date: Thu, 18 Dec 2025 13:30:46 +1300 Subject: [PATCH 1/6] feat: Add danger icon button color variant --- .../src/content/components/icon-button.mdx | 22 +++++++++++++++++++ .../icon-button/icon-button.module.css | 10 +++++++++ .../components/icon-button/icon-button.tsx | 9 ++++++-- 3 files changed, 39 insertions(+), 2 deletions(-) diff --git a/packages/demo/src/content/components/icon-button.mdx b/packages/demo/src/content/components/icon-button.mdx index 45400ed..1d849f3 100644 --- a/packages/demo/src/content/components/icon-button.mdx +++ b/packages/demo/src/content/components/icon-button.mdx @@ -59,3 +59,25 @@ import { IconButton } from "@eqtylab/equality"; download client:only="react" /> + +## Color Variants + +### Primary (default) + + console.log("Share clicked")} + client:only="react" +/> + +### Danger + + console.log("Share clicked")} + client:only="react" +/> diff --git a/packages/ui/src/components/icon-button/icon-button.module.css b/packages/ui/src/components/icon-button/icon-button.module.css index af525ea..ef04950 100644 --- a/packages/ui/src/components/icon-button/icon-button.module.css +++ b/packages/ui/src/components/icon-button/icon-button.module.css @@ -19,6 +19,16 @@ @apply size-12; } +/* Color Variants */ + +.icon-btn--primary { + @apply text-text-primary; +} + +.icon-btn--danger { + @apply text-red-500; +} + /* Background Variants */ .background--square { diff --git a/packages/ui/src/components/icon-button/icon-button.tsx b/packages/ui/src/components/icon-button/icon-button.tsx index 733a448..0f21683 100644 --- a/packages/ui/src/components/icon-button/icon-button.tsx +++ b/packages/ui/src/components/icon-button/icon-button.tsx @@ -12,6 +12,10 @@ const iconButtonVariants = cva(styles['icon-btn'], { md: styles['size--md'], lg: styles['size--lg'], }, + variant: { + primary: styles['icon-btn--primary'], + danger: styles['icon-btn--danger'], + }, }, defaultVariants: { size: 'sm', @@ -37,6 +41,7 @@ export interface IconButtonProps function IconButton({ className, size = 'sm', + variant = 'primary', name, label, href, @@ -64,7 +69,7 @@ function IconButton({ download={download} aria-label={label} rel={target === '_blank' ? 'noopener noreferrer' : undefined} - className={cn(iconButtonVariants({ size }), className)} + className={cn(iconButtonVariants({ size, variant }), className)} > {content} @@ -76,7 +81,7 @@ function IconButton({ type="button" aria-label={label} disabled={disabled} - className={cn(iconButtonVariants({ size }), className)} + className={cn(iconButtonVariants({ size, variant }), className)} {...props} > {content} From 2684a5825797c7a9aa61f66d01f968caa2039e97 Mon Sep 17 00:00:00 2001 From: Kate Scherz Date: Thu, 18 Dec 2025 15:38:34 +1300 Subject: [PATCH 2/6] fix: Add default variant --- packages/ui/src/components/icon-button/icon-button.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui/src/components/icon-button/icon-button.tsx b/packages/ui/src/components/icon-button/icon-button.tsx index 0f21683..b8d5d73 100644 --- a/packages/ui/src/components/icon-button/icon-button.tsx +++ b/packages/ui/src/components/icon-button/icon-button.tsx @@ -19,6 +19,7 @@ const iconButtonVariants = cva(styles['icon-btn'], { }, defaultVariants: { size: 'sm', + variant: 'primary', }, }); From 01920b3b5d9020d43b14a5cf12dcb8ab9498537b Mon Sep 17 00:00:00 2001 From: Henry Wilkinson Date: Mon, 5 Jan 2026 13:57:32 -0500 Subject: [PATCH 3/6] Add hover states to icon butotn --- .../ui/src/components/icon-button/icon-button.module.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/icon-button/icon-button.module.css b/packages/ui/src/components/icon-button/icon-button.module.css index ef04950..b58b001 100644 --- a/packages/ui/src/components/icon-button/icon-button.module.css +++ b/packages/ui/src/components/icon-button/icon-button.module.css @@ -3,7 +3,7 @@ .icon-btn { @apply rounded-md transition-colors; @apply flex-center; - @apply disabled:cursor-not-allowed disabled:opacity-50; + @apply disabled:cursor-not-allowed disabled:opacity-50 hover:disabled:bg-transparent; @apply focus-ring; } @@ -23,10 +23,13 @@ .icon-btn--primary { @apply text-text-primary; + @apply enabled:hover:bg-lilac-400/25 enabled:hover:text-lilac-800 enabled:dark:hover:bg-lilac-500/25; } .icon-btn--danger { - @apply text-red-500; + @apply text-red-600; + @apply dark:text-red-400; + @apply enabled:hover:bg-red-400/25 enabled:dark:hover:bg-red-500/25 enabled:dark:hover:text-red-300; } /* Background Variants */ From 932743317cc29e0737364d1aff822896ea8945a7 Mon Sep 17 00:00:00 2001 From: Henry Wilkinson Date: Mon, 5 Jan 2026 15:15:39 -0500 Subject: [PATCH 4/6] remove unused background variants --- .../components/icon-button/icon-button.module.css | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/packages/ui/src/components/icon-button/icon-button.module.css b/packages/ui/src/components/icon-button/icon-button.module.css index b58b001..a15b91a 100644 --- a/packages/ui/src/components/icon-button/icon-button.module.css +++ b/packages/ui/src/components/icon-button/icon-button.module.css @@ -23,7 +23,7 @@ .icon-btn--primary { @apply text-text-primary; - @apply enabled:hover:bg-lilac-400/25 enabled:hover:text-lilac-800 enabled:dark:hover:bg-lilac-500/25; + @apply enabled:hover:bg-lilac-400/25 enabled:hover:text-lilac-800 enabled:dark:hover:bg-lilac-500/25 enabled:dark:hover:text-lilac-200; } .icon-btn--danger { @@ -31,13 +31,3 @@ @apply dark:text-red-400; @apply enabled:hover:bg-red-400/25 enabled:dark:hover:bg-red-500/25 enabled:dark:hover:text-red-300; } - -/* Background Variants */ - -.background--square { - @apply rounded-lg; -} - -.background--circle { - @apply rounded-full; -} From fd87fe78a614954d83ec9c48738dfc541a459fd0 Mon Sep 17 00:00:00 2001 From: Henry Wilkinson Date: Mon, 5 Jan 2026 15:17:04 -0500 Subject: [PATCH 5/6] update button bg roundness with scale --- .../ui/src/components/icon-button/icon-button.module.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ui/src/components/icon-button/icon-button.module.css b/packages/ui/src/components/icon-button/icon-button.module.css index a15b91a..0c8b71f 100644 --- a/packages/ui/src/components/icon-button/icon-button.module.css +++ b/packages/ui/src/components/icon-button/icon-button.module.css @@ -1,22 +1,22 @@ @reference '../../theme/theme.module.css'; .icon-btn { - @apply rounded-md transition-colors; + @apply transition-colors; @apply flex-center; @apply disabled:cursor-not-allowed disabled:opacity-50 hover:disabled:bg-transparent; @apply focus-ring; } .size--sm { - @apply size-8; + @apply size-8 rounded-md; } .size--md { - @apply size-10; + @apply size-10 rounded-lg; } .size--lg { - @apply size-12; + @apply size-12 rounded-xl; } /* Color Variants */ From 5c7e45699bc2528f8d74a6e4a4a5324176a2c8f2 Mon Sep 17 00:00:00 2001 From: Henry Wilkinson Date: Mon, 5 Jan 2026 19:04:35 -0500 Subject: [PATCH 6/6] fix disabled state for link icon buttons --- .../ui/src/components/icon-button/icon-button.module.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/components/icon-button/icon-button.module.css b/packages/ui/src/components/icon-button/icon-button.module.css index 0c8b71f..d5ab788 100644 --- a/packages/ui/src/components/icon-button/icon-button.module.css +++ b/packages/ui/src/components/icon-button/icon-button.module.css @@ -5,6 +5,7 @@ @apply flex-center; @apply disabled:cursor-not-allowed disabled:opacity-50 hover:disabled:bg-transparent; @apply focus-ring; + @apply flex; } .size--sm { @@ -23,11 +24,11 @@ .icon-btn--primary { @apply text-text-primary; - @apply enabled:hover:bg-lilac-400/25 enabled:hover:text-lilac-800 enabled:dark:hover:bg-lilac-500/25 enabled:dark:hover:text-lilac-200; + @apply not-disabled:hover:bg-lilac-400/25 not-disabled:hover:text-lilac-800 not-disabled:dark:hover:bg-lilac-500/25 not-disabled:dark:hover:text-lilac-200; } .icon-btn--danger { @apply text-red-600; @apply dark:text-red-400; - @apply enabled:hover:bg-red-400/25 enabled:dark:hover:bg-red-500/25 enabled:dark:hover:text-red-300; + @apply not-disabled:hover:bg-red-400/25 not-disabled:dark:hover:bg-red-500/25 not-disabled:dark:hover:text-red-300; }