From e7861d2313af19ed278ff9a01a7b0eef5db6861b Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Mon, 13 Apr 2026 13:52:54 +0100
Subject: [PATCH 01/14] =?UTF-8?q?chore:=20=F0=9F=A4=96=20create=20CSS=20mo?=
 =?UTF-8?q?dule=20for=20ButtonGroup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ButtonGroup/ButtonGroup.module.css        | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 src/components/ButtonGroup/ButtonGroup.module.css

diff --git a/src/components/ButtonGroup/ButtonGroup.module.css b/src/components/ButtonGroup/ButtonGroup.module.css
new file mode 100644
index 000000000..e9c6d3a21
--- /dev/null
+++ b/src/components/ButtonGroup/ButtonGroup.module.css
@@ -0,0 +1,83 @@
+.buttonGroup {
+  display: inline-flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background: var(--click-button-group-color-background-panel);
+  border-radius: var(--click-button-group-radii-panel-all);
+}
+
+.buttonGroup_type-default {
+  padding: var(--click-button-group-space-panel-default-x)
+    var(--click-button-group-space-panel-default-y);
+  gap: var(--click-button-group-space-panel-default-gap);
+  border: 1px solid var(--click-button-group-color-panel-stroke-default);
+}
+
+.buttonGroup_type-borderless {
+  padding: var(--click-button-group-space-panel-borderless-x)
+    var(--click-button-group-space-panel-borderless-y);
+  gap: var(--click-button-group-space-panel-borderless-gap);
+  border: none;
+}
+
+.buttonGroup_fillWidth {
+  width: 100%;
+}
+
+.button {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  cursor: pointer;
+  background: var(--click-button-group-color-background-default);
+  color: var(--click-button-group-color-text-default);
+  font: var(--click-button-group-typography-label-default);
+  white-space: nowrap;
+}
+
+.button_type-default {
+  padding: var(--click-button-group-space-button-default-y)
+    var(--click-button-group-space-button-default-x);
+  border-radius: var(--click-button-group-radii-button-default-all);
+}
+
+.button_type-borderless {
+  padding: var(--click-button-group-space-button-borderless-y)
+    var(--click-button-group-space-button-borderless-x);
+  border-radius: var(--click-button-group-radii-button-borderless-all);
+}
+
+.button_fillWidth {
+  flex: 1;
+}
+
+.button:hover:not(:disabled) {
+  background: var(--click-button-group-color-background-hover);
+  font: var(--click-button-group-typography-label-hover);
+  color: var(--click-button-group-color-text-hover);
+}
+
+.button_active,
+.button[aria-pressed='true'] {
+  background: var(--click-button-group-color-background-active);
+  font: var(--click-button-group-typography-label-active);
+  color: var(--click-button-group-color-text-active);
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  font: var(--click-button-group-typography-label-disabled);
+  color: var(--click-button-group-color-text-disabled);
+  background: var(--click-button-group-color-background-disabled);
+}
+
+.button_active:disabled,
+.button[aria-pressed='true']:disabled {
+  background: var(--click-button-group-color-background-disabled-active);
+  color: var(--click-button-group-color-text-disabled-active);
+}

From 18561cc162a2dad1e0e2a215dab376816d26ced7 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Mon, 13 Apr 2026 14:00:16 +0100
Subject: [PATCH 02/14] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Migrated=20from?=
 =?UTF-8?q?=20styled-components=20to=20CSS=20Modules?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ButtonGroup/ButtonGroup.tsx | 133 +++++++--------------
 1 file changed, 40 insertions(+), 93 deletions(-)

diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
index 7895b2046..66e90592b 100644
--- a/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -1,6 +1,33 @@
 import { useCallback, useState } from 'react';
-import { styled } from 'styled-components';
+import { cn, cva } from '@/lib/cva';
 import { ButtonGroupProps, SelectionValue } from './ButtonGroup.types';
+import styles from './ButtonGroup.module.css';
+
+const wrapperVariants = cva(styles.buttonGroup, {
+  variants: {
+    type: {
+      default: styles['buttonGroup_type-default'],
+      borderless: styles['buttonGroup_type-borderless'],
+    },
+    fillWidth: {
+      true: styles['buttonGroup_fillWidth'],
+    },
+  },
+  defaultVariants: { type: 'default' },
+});
+
+const buttonVariants = cva(styles.button, {
+  variants: {
+    type: {
+      default: styles['button_type-default'],
+      borderless: styles['button_type-borderless'],
+    },
+    fillWidth: {
+      true: styles['button_fillWidth'],
+    },
+  },
+  defaultVariants: { type: 'default' },
+});
 
 const normalizeToSet = (value: SelectionValue | undefined): Set<string> => {
   if (value === undefined) {
@@ -25,6 +52,7 @@ export const ButtonGroup = ({
   type = 'default',
   multiple = false,
   'aria-label': ariaLabel,
+  className,
   ...props
 }: ButtonGroupProps) => {
   const [internalSelection, setInternalSelection] = useState<Set<string>>(() =>
@@ -65,115 +93,34 @@ export const ButtonGroup = ({
     [currentSelection, multiple, isControlled, onClick]
   );
 
-  const buttons = options.map(({ value, label, ...buttonProps }) => {
+  const buttons = options.map(({ value, label, disabled, ...buttonProps }) => {
     const isActive = isValueSelected(value, currentSelection);
 
     return (
-      <Button
+      <button
         key={value}
-        $active={isActive}
+        className={cn(
+          buttonVariants({ type, fillWidth }),
+          isActive && styles['button_active']
+        )}
         aria-pressed={isActive}
-        $fillWidth={fillWidth}
-        $type={type}
+        disabled={disabled}
         onClick={() => onButtonGroupClickCommonHandler(value)}
         {...buttonProps}
       >
         {label}
-      </Button>
+      </button>
     );
   });
 
   return (
-    <ButtonGroupWrapper
+    <div
       {...props}
-      $fillWidth={fillWidth}
-      $type={type}
+      className={cn(wrapperVariants({ type, fillWidth }), className)}
       role="group"
       aria-label={ariaLabel}
     >
       {buttons}
-    </ButtonGroupWrapper>
+    </div>
   );
 };
-
-import { ButtonGroupType } from './ButtonGroup.types';
-
-const ButtonGroupWrapper = styled.div<{ $fillWidth: boolean; $type: ButtonGroupType }>`
-  display: inline-flex;
-  box-sizing: border-box;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: ${({ theme, $type }) =>
-    `${theme.click.button.group.space.panel[$type].x} ${theme.click.button.group.space.panel[$type].y}`};
-  gap: ${({ theme, $type }) => theme.click.button.group.space.panel[$type].gap};
-  border: ${({ theme, $type }) =>
-    $type === 'default'
-      ? `1px solid ${theme.click.button.group.color.panel.stroke[$type]}`
-      : 'none'};
-  background: ${({ theme }) => theme.click.button.group.color.background.panel};
-  border-radius: ${({ theme }) => theme.click.button.group.radii.panel.all};
-  width: ${({ $fillWidth }) => ($fillWidth ? '100%' : 'auto')};
-`;
-
-const Button = styled.button.attrs<{
-  disabled?: boolean;
-}>(props => ({
-  'aria-disabled': props.disabled ? 'true' : undefined,
-}))<{
-  $active: boolean;
-  $fillWidth: boolean;
-  $type: ButtonGroupType;
-  disabled?: boolean;
-}>`
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  background: ${({ $active, theme }) =>
-    $active
-      ? theme.click.button.group.color.background.active
-      : theme.click.button.group.color.background.default};
-  color: ${({ theme }) => theme.click.button.group.color.text.default};
-  font: ${({ theme }) => theme.click.button.group.typography.label.default};
-  padding: ${({ theme, $type }) =>
-    `${theme.click.button.group.space.button[$type].y} ${theme.click.button.group.space.button[$type].x}`};
-  ${({ $fillWidth }) => ($fillWidth ? 'flex: 1;' : '')};
-  border-radius: ${({ theme, $type }) =>
-    theme.click.button.group.radii.button[$type].all};
-  cursor: pointer;
-  border: none;
-
-  &:hover {
-    background: ${({ theme }) => theme.click.button.group.color.background.hover};
-    font: ${({ theme }) => theme.click.button.group.typography.label.hover};
-    color: ${({ theme }) => theme.click.button.group.color.text.hover};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    font: ${({ theme }) => theme.click.button.group.typography.label.disabled};
-    color: ${({ theme }) => theme.click.button.group.color.text.disabled};
-    background: ${({ theme, $active }) =>
-      theme.click.button.group.color.background[
-        $active ? 'disabled-active' : 'disabled'
-      ]};
-
-    &:active,
-    &:focus,
-    &[aria-pressed='true'] {
-      color: ${({ theme }) => theme.click.button.group.color.text.disabled};
-    }
-  }
-
-  &[aria-pressed='true'] {
-    background: ${({ theme }) => theme.click.button.group.color.background.active};
-    font: ${({ theme }) => theme.click.button.group.typography.label.active};
-    color: ${({ theme }) => theme.click.button.group.color.text.active};
-    &:disabled {
-      background: ${({ theme }) =>
-        theme.click.button.group.color.background['disabled-active']};
-    }
-  }
-`;

From 634aa643cde143ae7ed800cefe2616997a32d2e6 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Mon, 13 Apr 2026 14:39:53 +0100
Subject: [PATCH 03/14] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20changeset?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/dull-suits-tell.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/dull-suits-tell.md

diff --git a/.changeset/dull-suits-tell.md b/.changeset/dull-suits-tell.md
new file mode 100644
index 000000000..aa8f0cf06
--- /dev/null
+++ b/.changeset/dull-suits-tell.md
@@ -0,0 +1,5 @@
+---
+'@clickhouse/click-ui': patch
+---
+
+Migrate ButtonGroup component from Styled-Components to CSS Modules

From c4bcff67210ede3367d58133f99e27dcb9728b38 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Mon, 13 Apr 2026 16:12:21 +0100
Subject: [PATCH 04/14] fix(ButtonGroup): comply with CSS linting rules

- Rename classes to follow BEM convention (lowercase with underscores)
- Reorder CSS properties alphabetically
- Update component to use new class names
---
 .../ButtonGroup/ButtonGroup.module.css        | 48 +++++++++----------
 src/components/ButtonGroup/ButtonGroup.tsx    | 14 +++---
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/components/ButtonGroup/ButtonGroup.module.css b/src/components/ButtonGroup/ButtonGroup.module.css
index e9c6d3a21..db344b4c8 100644
--- a/src/components/ButtonGroup/ButtonGroup.module.css
+++ b/src/components/ButtonGroup/ButtonGroup.module.css
@@ -1,79 +1,66 @@
-.buttonGroup {
+.buttongroup {
   display: inline-flex;
   box-sizing: border-box;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  background: var(--click-button-group-color-background-panel);
   border-radius: var(--click-button-group-radii-panel-all);
+  background: var(--click-button-group-color-background-panel);
 }
 
-.buttonGroup_type-default {
+.buttongroup_type_default {
   padding: var(--click-button-group-space-panel-default-x)
     var(--click-button-group-space-panel-default-y);
   gap: var(--click-button-group-space-panel-default-gap);
   border: 1px solid var(--click-button-group-color-panel-stroke-default);
 }
 
-.buttonGroup_type-borderless {
+.buttongroup_type_borderless {
   padding: var(--click-button-group-space-panel-borderless-x)
     var(--click-button-group-space-panel-borderless-y);
   gap: var(--click-button-group-space-panel-borderless-gap);
   border: none;
 }
 
-.buttonGroup_fillWidth {
+.buttongroup_fillwidth {
   width: 100%;
 }
 
 .button {
-  box-sizing: border-box;
   display: flex;
+  box-sizing: border-box;
   flex-direction: row;
   justify-content: center;
   align-items: center;
   border: none;
-  cursor: pointer;
   background: var(--click-button-group-color-background-default);
   color: var(--click-button-group-color-text-default);
   font: var(--click-button-group-typography-label-default);
   white-space: nowrap;
+  cursor: pointer;
 }
 
-.button_type-default {
+.button_type_default {
   padding: var(--click-button-group-space-button-default-y)
     var(--click-button-group-space-button-default-x);
   border-radius: var(--click-button-group-radii-button-default-all);
 }
 
-.button_type-borderless {
+.button_type_borderless {
   padding: var(--click-button-group-space-button-borderless-y)
     var(--click-button-group-space-button-borderless-x);
   border-radius: var(--click-button-group-radii-button-borderless-all);
 }
 
-.button_fillWidth {
+.button_fillwidth {
   flex: 1;
 }
 
-.button:hover:not(:disabled) {
-  background: var(--click-button-group-color-background-hover);
-  font: var(--click-button-group-typography-label-hover);
-  color: var(--click-button-group-color-text-hover);
-}
-
 .button_active,
 .button[aria-pressed='true'] {
   background: var(--click-button-group-color-background-active);
-  font: var(--click-button-group-typography-label-active);
   color: var(--click-button-group-color-text-active);
-}
-
-.button:disabled {
-  cursor: not-allowed;
-  font: var(--click-button-group-typography-label-disabled);
-  color: var(--click-button-group-color-text-disabled);
-  background: var(--click-button-group-color-background-disabled);
+  font: var(--click-button-group-typography-label-active);
 }
 
 .button_active:disabled,
@@ -81,3 +68,16 @@
   background: var(--click-button-group-color-background-disabled-active);
   color: var(--click-button-group-color-text-disabled-active);
 }
+
+.button:disabled {
+  background: var(--click-button-group-color-background-disabled);
+  color: var(--click-button-group-color-text-disabled);
+  font: var(--click-button-group-typography-label-disabled);
+  cursor: not-allowed;
+}
+
+.button:hover:not(:disabled) {
+  background: var(--click-button-group-color-background-hover);
+  color: var(--click-button-group-color-text-hover);
+  font: var(--click-button-group-typography-label-hover);
+}
diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
index 66e90592b..0de4dcf3a 100644
--- a/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -3,14 +3,14 @@ import { cn, cva } from '@/lib/cva';
 import { ButtonGroupProps, SelectionValue } from './ButtonGroup.types';
 import styles from './ButtonGroup.module.css';
 
-const wrapperVariants = cva(styles.buttonGroup, {
+const wrapperVariants = cva(styles.buttongroup, {
   variants: {
     type: {
-      default: styles['buttonGroup_type-default'],
-      borderless: styles['buttonGroup_type-borderless'],
+      default: styles['buttongroup_type_default'],
+      borderless: styles['buttongroup_type_borderless'],
     },
     fillWidth: {
-      true: styles['buttonGroup_fillWidth'],
+      true: styles['buttongroup_fillwidth'],
     },
   },
   defaultVariants: { type: 'default' },
@@ -19,11 +19,11 @@ const wrapperVariants = cva(styles.buttonGroup, {
 const buttonVariants = cva(styles.button, {
   variants: {
     type: {
-      default: styles['button_type-default'],
-      borderless: styles['button_type-borderless'],
+      default: styles['button_type_default'],
+      borderless: styles['button_type_borderless'],
     },
     fillWidth: {
-      true: styles['button_fillWidth'],
+      true: styles['button_fillwidth'],
     },
   },
   defaultVariants: { type: 'default' },

From e1afe16d4616ddd5653f3b8ae4a3cbd694f017c1 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Mon, 13 Apr 2026 16:20:54 +0100
Subject: [PATCH 05/14] =?UTF-8?q?fix:=20=F0=9F=90=9B=20pupdate=20snapshot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...up-disabled-active-dark-chromium-linux.png | Bin 2719 -> 2873 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)

diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-disabled-active-dark-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-disabled-active-dark-chromium-linux.png
index 61be6a5f65f4740125860900da76a3ae93702e28..0e2c7cc7fbabf0b39431c0ac929b3b0bcabbac5c 100644
GIT binary patch
delta 2866
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
Q+W-In07*qoM6N<$g4G+NegFUf

delta 2711
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
R>|Ou>002ovPDHLkV1j$cF8BZd


From 19a016c0465484ed5b13baf3856d5fbcfaf944f5 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Mon, 13 Apr 2026 16:26:15 +0100
Subject: [PATCH 06/14] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Added=20:focus-visi?=
 =?UTF-8?q?ble=20rule=20to=20.button=20in=20the=20CSS=20Module?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ButtonGroup/ButtonGroup.module.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/ButtonGroup/ButtonGroup.module.css b/src/components/ButtonGroup/ButtonGroup.module.css
index db344b4c8..4dd5b5bc9 100644
--- a/src/components/ButtonGroup/ButtonGroup.module.css
+++ b/src/components/ButtonGroup/ButtonGroup.module.css
@@ -81,3 +81,8 @@
   color: var(--click-button-group-color-text-hover);
   font: var(--click-button-group-typography-label-hover);
 }
+
+.button:focus-visible:not(:disabled) {
+  outline: 2px solid var(--click-button-group-color-background-active);
+  outline-offset: 2px;
+}

From 0b44b829506daf1408d755797a39ceeaae17fae6 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Mon, 13 Apr 2026 16:27:32 +0100
Subject: [PATCH 07/14] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Added=20aria-disabl?=
 =?UTF-8?q?ed=20attribute=20to=20disabled=20buttons?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ButtonGroup/ButtonGroup.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
index 0de4dcf3a..0cca99c92 100644
--- a/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -105,6 +105,7 @@ export const ButtonGroup = ({
         )}
         aria-pressed={isActive}
         disabled={disabled}
+        aria-disabled={disabled ? true : undefined}
         onClick={() => onButtonGroupClickCommonHandler(value)}
         {...buttonProps}
       >

From 27eada0dcdf7feeb8f854a0e120cfad30714d1ab Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Mon, 13 Apr 2026 16:31:41 +0100
Subject: [PATCH 08/14] =?UTF-8?q?fix:=20=F0=9F=90=9B=20missing=20aria=20la?=
 =?UTF-8?q?bel,=20remove=20redundant,=20update=20snapshot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ButtonGroup/ButtonGroup.module.css         |   2 --
 .../ButtonGroup/ButtonGroup.stories.tsx        |  13 +++++++++++++
 src/components/ButtonGroup/ButtonGroup.tsx     |   5 +----
 ...group-button-focus-light-chromium-linux.png | Bin 1040 -> 971 bytes
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/ButtonGroup/ButtonGroup.module.css b/src/components/ButtonGroup/ButtonGroup.module.css
index 4dd5b5bc9..5271ee960 100644
--- a/src/components/ButtonGroup/ButtonGroup.module.css
+++ b/src/components/ButtonGroup/ButtonGroup.module.css
@@ -56,14 +56,12 @@
   flex: 1;
 }
 
-.button_active,
 .button[aria-pressed='true'] {
   background: var(--click-button-group-color-background-active);
   color: var(--click-button-group-color-text-active);
   font: var(--click-button-group-typography-label-active);
 }
 
-.button_active:disabled,
 .button[aria-pressed='true']:disabled {
   background: var(--click-button-group-color-background-disabled-active);
   color: var(--click-button-group-color-text-disabled-active);
diff --git a/src/components/ButtonGroup/ButtonGroup.stories.tsx b/src/components/ButtonGroup/ButtonGroup.stories.tsx
index d16b1d18b..ceeb85582 100644
--- a/src/components/ButtonGroup/ButtonGroup.stories.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.stories.tsx
@@ -33,6 +33,7 @@ export const Default: StoryObj<typeof ButtonGroup> = {
       { label: 'Option 3', value: 'option3' },
     ],
     type: 'default',
+    'aria-label': 'Button group',
   },
 };
 
@@ -44,6 +45,7 @@ export const Borderless: StoryObj<typeof ButtonGroup> = {
       { label: 'Option 3', value: 'option3' },
     ],
     type: 'borderless',
+    'aria-label': 'Button group',
   },
 };
 
@@ -56,6 +58,7 @@ export const DefaultSelected: StoryObj<typeof ButtonGroup> = {
     ],
     type: 'default',
     selected: 'option1',
+    'aria-label': 'Button group',
   },
 };
 
@@ -68,6 +71,7 @@ export const BorderlessSelected: StoryObj<typeof ButtonGroup> = {
     ],
     type: 'borderless',
     selected: 'option1',
+    'aria-label': 'Button group',
   },
 };
 
@@ -78,6 +82,7 @@ export const WithDisabledButton: StoryObj<typeof ButtonGroup> = {
       { label: 'Disabled', value: 'disabled', disabled: true },
     ],
     type: 'default',
+    'aria-label': 'Button group',
   },
 };
 
@@ -89,6 +94,7 @@ export const WithDisabledSelectedButton: StoryObj<typeof ButtonGroup> = {
     ],
     type: 'default',
     selected: 'disabled',
+    'aria-label': 'Button group',
   },
 };
 
@@ -100,6 +106,7 @@ export const FillWidthDefault: StoryObj<typeof ButtonGroup> = {
     ],
     type: 'default',
     fillWidth: true,
+    'aria-label': 'Button group',
   },
 };
 
@@ -111,6 +118,7 @@ export const FillWidthBorderless: StoryObj<typeof ButtonGroup> = {
     ],
     type: 'borderless',
     fillWidth: true,
+    'aria-label': 'Button group',
   },
 };
 
@@ -124,6 +132,7 @@ export const MultiSelectSelected: StoryObj<typeof ButtonGroup> = {
     type: 'default',
     multiple: true,
     selected: new Set(['option1', 'option3']),
+    'aria-label': 'Button group',
   },
 };
 
@@ -137,6 +146,7 @@ export const MultiSelectBorderless: StoryObj<typeof ButtonGroup> = {
     type: 'borderless',
     multiple: true,
     selected: new Set(['option1', 'option3']),
+    'aria-label': 'Button group',
   },
 };
 
@@ -151,6 +161,7 @@ export const MultiSelect: StoryObj<typeof ButtonGroup> = {
     type: 'default',
     multiple: true,
     defaultSelected: new Set(['option1', 'option3']),
+    'aria-label': 'Button group',
     onClick: (_value, selected) => {
       console.log('🔎 Selected:', [...selected]);
     },
@@ -167,6 +178,7 @@ export const ConsumerControlledStateSingle: StoryObj<typeof ButtonGroup> = {
     fillWidth: false,
     type: 'default',
     selected: 'option2',
+    'aria-label': 'Button group',
   },
   render: args => {
     const [selected, setSelected] = useState(args.selected);
@@ -194,6 +206,7 @@ export const ConsumerControlledStateMulti: StoryObj<typeof ButtonGroup> = {
     type: 'default',
     multiple: true,
     selected: new Set(['option2']),
+    'aria-label': 'Button group',
   },
   render: args => {
     const [selected, setSelected] = useState(args.selected);
diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
index 0cca99c92..77ad99be2 100644
--- a/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -99,10 +99,7 @@ export const ButtonGroup = ({
     return (
       <button
         key={value}
-        className={cn(
-          buttonVariants({ type, fillWidth }),
-          isActive && styles['button_active']
-        )}
+        className={cn(buttonVariants({ type, fillWidth }))}
         aria-pressed={isActive}
         disabled={disabled}
         aria-disabled={disabled ? true : undefined}
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-button-focus-light-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-button-focus-light-chromium-linux.png
index 7a19fa353c4962a0ce5eecb4cd949047e39f40ed..5857caee8af69df428a41c03a8a3d7c700ab14dc 100644
GIT binary patch
delta 949
zcmV;m14{gm2+IeMB!7TOL_t(|oa~q_aN9@}$G10?K$l41mPjBX4(Jk_m{_1D3W$gg
z#4~pyF{r^gGiL!OGr0o$W?}>TW}*NW_(%$zo2khaL_`G*(E*!mKtfa?69q_Q4@e+q
zyN*-$Q*PRsPU0Wa+Ha-*dvD)+(*4WJOK@kn5AG66wYQh0+JD>2Qtii}u6=yeGwt&W
zz^x>+xqMERAXu2tvzpazr0i^~5({pIPo6iM&rSm&*J^2>-|Ytw6Q6W;%k`eirL|H?
z%b>t&RVwYi|5?M(J>LEK*UlNeT414&kR(aqZYVW$j`u3nULYhmhKXkqGq$vU)HZ2)
z`%gWMCJR|LXMgWkn(f16V=K*rg@CI+={w-Y1nzm1Dm6CH%WAbB&m^8&pS<jQf}$tU
z^%|d4RmtvI#81n--)~mhp`!AGf2`90t|T+Le14SYl(c{Q-Mj$cbo&=GvDv7NlXv`Q
zBh*?uG7qTps@v_^gV!S?oK`oq?CRujOg5yl4EvV-I)7kRGWp`Bx;p1pBp08^ETCr~
zHnB1}3_On_yo%;>j};P_4?QmkCzsL1zr7QX)eoLFHgRAX)wb;eh>Hit<A)D~_4>2F
z8}FS{-|p-gClsrta%lsDe!IT^$_uAIMi<2P5?bxRsA;0pHI4{<=eZU>3bE8iVGyzm
z2j4v%kbi?93TX7^iuq9<hXx@@*7O1f#2k2^+&1(E<^W`hdO?+Cd99#tDe(M-J)FvA
z9!QUJN=if`&gK-6I%hLSd?~TiGH_H;u4T=j0R=NBFi=d0(-O^c(nA#bL!W+X+sGv@
z5V3TXpHRRO;}iGFh~*G`6FwG>ZbILGfJKR=mVf0X3HoH<&iOVR65>NiylHKnXI@au
zS{s*m9SBMp%ny$bO=lLY(6tVG4#b(nG&E7*5@*_w!oWH8059;@?f3&>VNe2rYa>91
z#Gz=GAm4zP9SGu$qH<RKYj>AqvuO!91Is!Y@`|pduJVupf!(R^yGmLFq}LgMR2h#;
zIDZRy9@3%fc?iu?a{?>M`K-CuF`kF(qw?*TM;4Ivtn^iLWscah6psskwD5SAIy7F4
zXQ{RF*8D8R;Wd>bU8DZrc+x6A$;)VJxvmJ+r{%}OdaY5wZ%1zA#GNg=*KE~Bp=X3g
z#qG`1g3Ws&?tPta7jL)F@0jIV!R_VV@-8dft>td1{T~1T|Nq+wWZnP(00v1!K~w_(
XK;v+=66RxH00000NkvXXu0mjfq+8LY

delta 1018
zcmV<W0|orc2apJmB!9(8L_t(|oa~q}Y}!~D$6xPaE9zTpMd!sH;)O)wEwG?ScqofA
z#2L6DNOvq@D8muyU?51j4sa4Mz)2wk9k?YO$Vp|$bqI?)G*aXnU~#07#U0FI277ro
z*h>u|q_kCQnpUcyKZ(H)f6xBE?|a|(`7Kct1r~-S_qV;hoqx;a*4Nj;oN{$_RV)@y
zPfs7XzP-4(m}99oxPmt}Hil|V(*z3uP18$Yk@&85ewjrr)|Io9R$I9q0BSW5iN>M=
z55dgXhFr-v9Wl2r@g%q(ruw{6d3I^B(P}mR>Dhh&9x>I%LAun^sZczXiia6Xu4c3K
z&ZqO6t)CtI@_$>Shi?Z+$ohDmXQ_KiwY9TiHs7*XA4L$}Og#D)cTVbU9NPaY6JkaK
z5h<!1W-ImMKzT1jgPDM9KWB2_-dOsz6HJwNn3wr{$D4^awWj*AW3XZ-z}$_|0ZHPO
zmaLi~fi^ppY~2<my8EwuX~ES%I2wz&agNpc?|-xh0DoNW|JwHLmJ7q+9o}5C<JFu%
z1FXGjHd{*fwQGbz(oQ_GHrgDc39%r+j;y@4h}Cc`xht(rEh{4=p9mztJ>VHnk!)Lr
zff=;MOvN6_`Veg!hGmZ~oxy*ta}dcKJuUAdORnYXiU}Y}9@QTEAF^AeXaAJn+oz_|
zDAvv~l7CX^)D8ljdg<_$VUPcG2C8EC;)SDHA<k*d+KGzad9Rtbf+w|(ZP_G2!FP8D
zq#$rC?A%-tKM6zEFbprmGYJILcGvjmw6@W0cR@IrNl1bqY$h^$BD{W~^v80Ehy0_c
z7~~iZMWP~ywccbQJ{M1F3Fu~&J6RL3g~4PI2!F`=xN(XmDc;Z6X5Yjgo7T})9dL-h
zjZerTo-kGY)`+ASc;h}2x(~tczrd_`QcKc24^6eJPpz%pS5*`8+<kNFG}D4S=31|K
zt3Z$sBf5Wf+}0+}vUT~mr9l+-ja}ndx~h!}l5J_12B2B`t{i{BEd=9Zz?~7meO1HE
zB!57@0v;<6L_0~bm;d|VK#fE~JkYwbeBP(UOgwlShXk;cM(I!&LmW_BjV=hL(J+OR
zkftH->xRKFlh7PNazZT9E;ee<?JYNbYwZ&m2$=}~MPp?O&%G3l5`R|Fu$MZny%_dV
zo9VsjUW!7S5~Vh4rT>SWR{BXyV8)hPB6FL6ntse~70L<pw&&bM%<bV~rCM-ZPq2@Y
z`@6vzi}y@?p)bC-OX#=C_b<M=X0c9ceq3H&9t;M4zkg+A1<WZor*OSq@4-Tyu)YBR
o0RR6jUm-&P000I_L_t&o0F&m94}nJ^VgLXD07*qoM6N<$f?J*KfB*mh


From c8eabc1024f41080c81c94c50f8c4a25c39a5149 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Mon, 13 Apr 2026 16:39:29 +0100
Subject: [PATCH 09/14] =?UTF-8?q?fix:=20=F0=9F=90=9B=20missing=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ButtonGroup/ButtonGroup.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
index 77ad99be2..7bf778d93 100644
--- a/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -99,6 +99,7 @@ export const ButtonGroup = ({
     return (
       <button
         key={value}
+        type="button"
         className={cn(buttonVariants({ type, fillWidth }))}
         aria-pressed={isActive}
         disabled={disabled}

From 38abdfca23a9a8b9f64e890151dc87a89e2220af Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Mon, 13 Apr 2026 16:43:16 +0100
Subject: [PATCH 10/14] =?UTF-8?q?fix:=20=F0=9F=90=9B=20claude=20PR=20amend?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ButtonGroup/ButtonGroup.test.tsx  | 16 +++++++++++++++-
 src/components/ButtonGroup/ButtonGroup.types.ts  |  6 ++++++
 .../DatePicker/DateTimeRangePicker.tsx           |  1 +
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/ButtonGroup/ButtonGroup.test.tsx b/src/components/ButtonGroup/ButtonGroup.test.tsx
index 14b8206ac..366466cf1 100644
--- a/src/components/ButtonGroup/ButtonGroup.test.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.test.tsx
@@ -13,7 +13,7 @@ describe('ButtonGroup', () => {
   ];
 
   it('renders buttons with labels correctly', () => {
-    const { getByText } = renderButtonGroup({ options });
+    const { getByText } = renderButtonGroup({ options, 'aria-label': 'Button group' });
 
     options.forEach(option => {
       expect(getByText(option.label).textContent).toBe(option.label);
@@ -27,6 +27,7 @@ describe('ButtonGroup', () => {
     const { getByText } = renderButtonGroup({
       options,
       onClick: handleClick,
+      'aria-label': 'Button group',
     });
 
     fireEvent.click(getByText('Option 2'));
@@ -45,6 +46,7 @@ describe('ButtonGroup', () => {
     const { getByText } = renderButtonGroup({
       options,
       onClick: handleClick,
+      'aria-label': 'Button group',
     });
 
     fireEvent.click(getByText('Option 2'));
@@ -66,6 +68,7 @@ describe('ButtonGroup', () => {
       onClick: handleClick,
       multiple: true,
       selected: new Set(['option1']),
+      'aria-label': 'Button group',
     });
 
     fireEvent.click(getByText('Option 2'));
@@ -85,6 +88,7 @@ describe('ButtonGroup', () => {
       onClick: handleClick,
       multiple: true,
       selected: new Set(['option1', 'option2']),
+      'aria-label': 'Button group',
     });
 
     fireEvent.click(getByText('Option 2'));
@@ -97,6 +101,7 @@ describe('ButtonGroup', () => {
       options,
       multiple: true,
       selected: new Set(['option1', 'option3']),
+      'aria-label': 'Button group',
     });
 
     const option1 = getByText('Option 1');
@@ -112,6 +117,7 @@ describe('ButtonGroup', () => {
     const { getByText } = renderButtonGroup({
       options,
       selected: 'option2',
+      'aria-label': 'Button group',
     });
 
     const activeButton = getByText('Option 2');
@@ -125,6 +131,7 @@ describe('ButtonGroup', () => {
       const { getByText } = renderButtonGroup({
         options,
         defaultSelected: 'option2',
+        'aria-label': 'Button group',
       });
 
       expect(getByText('Option 2')).toHaveAttribute('aria-pressed', 'true');
@@ -136,6 +143,7 @@ describe('ButtonGroup', () => {
         options,
         multiple: true,
         defaultSelected: new Set(['option1', 'option3']),
+        'aria-label': 'Button group',
       });
 
       expect(getByText('Option 1')).toHaveAttribute('aria-pressed', 'true');
@@ -147,6 +155,7 @@ describe('ButtonGroup', () => {
       const { getByText } = renderButtonGroup({
         options,
         defaultSelected: 'option1',
+        'aria-label': 'Button group',
       });
 
       fireEvent.click(getByText('Option 2'));
@@ -160,6 +169,7 @@ describe('ButtonGroup', () => {
         options,
         multiple: true,
         defaultSelected: new Set(['option1']),
+        'aria-label': 'Button group',
       });
 
       fireEvent.click(getByText('Option 2'));
@@ -173,6 +183,7 @@ describe('ButtonGroup', () => {
         options,
         multiple: true,
         defaultSelected: new Set(['option1', 'option2']),
+        'aria-label': 'Button group',
       });
 
       fireEvent.click(getByText('Option 2'));
@@ -193,6 +204,7 @@ describe('ButtonGroup', () => {
         options,
         defaultSelected: 'option1',
         onClick: handleClick,
+        'aria-label': 'Button group',
       });
 
       fireEvent.click(getByText('Option 2'));
@@ -209,6 +221,7 @@ describe('ButtonGroup', () => {
         options,
         selected: 'option3',
         defaultSelected: 'option1',
+        'aria-label': 'Button group',
       });
 
       expect(getByText('Option 3')).toHaveAttribute('aria-pressed', 'true');
@@ -219,6 +232,7 @@ describe('ButtonGroup', () => {
       const { getByText } = renderButtonGroup({
         options,
         selected: 'option1',
+        'aria-label': 'Button group',
       });
 
       fireEvent.click(getByText('Option 2'));
diff --git a/src/components/ButtonGroup/ButtonGroup.types.ts b/src/components/ButtonGroup/ButtonGroup.types.ts
index 6b4bbd3d3..7b49eaa79 100644
--- a/src/components/ButtonGroup/ButtonGroup.types.ts
+++ b/src/components/ButtonGroup/ButtonGroup.types.ts
@@ -22,4 +22,10 @@ export interface ButtonGroupProps extends Omit<
   fillWidth?: boolean;
   type?: ButtonGroupType;
   multiple?: boolean;
+  /**
+   * Accessible label for the button group.
+   * Required for WCAG 4.1.2 compliance - role="group" must have an accessible name.
+   * @see https://www.w3.org/WAI/WCAG21/Understanding/name-role-value
+   */
+  'aria-label': string;
 }
diff --git a/src/components/DatePicker/DateTimeRangePicker.tsx b/src/components/DatePicker/DateTimeRangePicker.tsx
index d06410c53..e40db767b 100644
--- a/src/components/DatePicker/DateTimeRangePicker.tsx
+++ b/src/components/DatePicker/DateTimeRangePicker.tsx
@@ -559,6 +559,7 @@ const TimeInput = ({ date, setDate, shouldShowSeconds }: TimeInputProps) => {
             ]}
             selected={meridiem}
             type="default"
+            aria-label="AM/PM selection"
           />
         </Container>
       </Container>

From 1e1402694786c8e61fe78b1438cbe91088407b67 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Mon, 13 Apr 2026 16:44:27 +0100
Subject: [PATCH 11/14] =?UTF-8?q?chore:=20=F0=9F=A4=96=20update=20changese?=
 =?UTF-8?q?t?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/dull-suits-tell.md                     |  5 -----
 .../migrate-component-button-group-to-css.md      | 15 +++++++++++++++
 2 files changed, 15 insertions(+), 5 deletions(-)
 delete mode 100644 .changeset/dull-suits-tell.md
 create mode 100644 .changeset/migrate-component-button-group-to-css.md

diff --git a/.changeset/dull-suits-tell.md b/.changeset/dull-suits-tell.md
deleted file mode 100644
index aa8f0cf06..000000000
--- a/.changeset/dull-suits-tell.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@clickhouse/click-ui': patch
----
-
-Migrate ButtonGroup component from Styled-Components to CSS Modules
diff --git a/.changeset/migrate-component-button-group-to-css.md b/.changeset/migrate-component-button-group-to-css.md
new file mode 100644
index 000000000..b48d16c00
--- /dev/null
+++ b/.changeset/migrate-component-button-group-to-css.md
@@ -0,0 +1,15 @@
+---
+'@clickhouse/click-ui': patch
+---
+
+Migrate ButtonGroup component from Styled-Components to CSS Modules
+
+**Behavior Improvements:**
+- **Accessibility**: Added `aria-disabled` attribute to disabled buttons (complements native `disabled` prop)
+- **Accessibility**: Made `aria-label` required for WCAG 4.1.2 compliance (role="group" requires accessible name)
+- **Accessibility**: Added `:focus-visible` styles for keyboard navigation with visible focus ring
+- **Forms**: Added `type="button"` to prevent accidental form submissions when used inside forms
+- **States**: Added proper `:hover:not(:disabled)` selector to prevent hover styles on disabled buttons
+- **States**: Added explicit styling for disabled+active button combination
+
+**Breaking Changes:** None - all changes are additive improvements that maintain backward compatibility

From 17f86985fb564383b927bf069c3515913b548d14 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Mon, 13 Apr 2026 16:51:17 +0100
Subject: [PATCH 12/14] =?UTF-8?q?chore:=20=F0=9F=A4=96=20make=20arial-labe?=
 =?UTF-8?q?l=20optional=20for=20backward=20compatibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/migrate-component-button-group-to-css.md | 9 +++++----
 src/components/ButtonGroup/ButtonGroup.types.ts     | 4 ++--
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/.changeset/migrate-component-button-group-to-css.md b/.changeset/migrate-component-button-group-to-css.md
index b48d16c00..43a405619 100644
--- a/.changeset/migrate-component-button-group-to-css.md
+++ b/.changeset/migrate-component-button-group-to-css.md
@@ -1,15 +1,16 @@
 ---
-'@clickhouse/click-ui': patch
+'@clickhouse/click-ui': minor
 ---
 
 Migrate ButtonGroup component from Styled-Components to CSS Modules
 
-**Behavior Improvements:**
+**New Features:**
 - **Accessibility**: Added `aria-disabled` attribute to disabled buttons (complements native `disabled` prop)
-- **Accessibility**: Made `aria-label` required for WCAG 4.1.2 compliance (role="group" requires accessible name)
+- **Accessibility**: Added optional `aria-label` prop for WCAG 4.1.2 compliance (role="group" should have accessible name)
 - **Accessibility**: Added `:focus-visible` styles for keyboard navigation with visible focus ring
 - **Forms**: Added `type="button"` to prevent accidental form submissions when used inside forms
 - **States**: Added proper `:hover:not(:disabled)` selector to prevent hover styles on disabled buttons
 - **States**: Added explicit styling for disabled+active button combination
 
-**Breaking Changes:** None - all changes are additive improvements that maintain backward compatibility
+**Migration Notes:**
+Consumers are encouraged to add `aria-label` to their ButtonGroup instances for improved accessibility, though it remains optional for backward compatibility.
diff --git a/src/components/ButtonGroup/ButtonGroup.types.ts b/src/components/ButtonGroup/ButtonGroup.types.ts
index 7b49eaa79..09c988a58 100644
--- a/src/components/ButtonGroup/ButtonGroup.types.ts
+++ b/src/components/ButtonGroup/ButtonGroup.types.ts
@@ -24,8 +24,8 @@ export interface ButtonGroupProps extends Omit<
   multiple?: boolean;
   /**
    * Accessible label for the button group.
-   * Required for WCAG 4.1.2 compliance - role="group" must have an accessible name.
+   * Strongly recommended for WCAG 4.1.2 compliance - role="group" should have an accessible name.
    * @see https://www.w3.org/WAI/WCAG21/Understanding/name-role-value
    */
-  'aria-label': string;
+  'aria-label'?: string;
 }

From eb4d02b7461e987f02ca7e4ad13612c373828a58 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Mon, 13 Apr 2026 16:54:12 +0100
Subject: [PATCH 13/14] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Prevented=20onClick?=
 =?UTF-8?q?=20override=20in=20ButtonGroupElementProps=20by=20omitting=20it?=
 =?UTF-8?q?=20from=20the=20type?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ButtonGroup/ButtonGroup.types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ButtonGroup/ButtonGroup.types.ts b/src/components/ButtonGroup/ButtonGroup.types.ts
index 09c988a58..e3aaef74f 100644
--- a/src/components/ButtonGroup/ButtonGroup.types.ts
+++ b/src/components/ButtonGroup/ButtonGroup.types.ts
@@ -5,7 +5,7 @@ export type SelectionValue = string | Set<string>;
 
 export interface ButtonGroupElementProps extends Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
-  'children'
+  'children' | 'onClick'
 > {
   value: string;
   label?: ReactNode;

From 52d9b02c55770716ee1f5748976486c77b63f000 Mon Sep 17 00:00:00 2001
From: Helder Oliveira <helder.oliveira@clickhouse.com>
Date: Mon, 13 Apr 2026 16:55:25 +0100
Subject: [PATCH 14/14] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20remove=20redun?=
 =?UTF-8?q?dant=20cn()=20since=20its=20not=20passing=20className?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ButtonGroup/ButtonGroup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
index 7bf778d93..f3fb3e53e 100644
--- a/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -100,7 +100,7 @@ export const ButtonGroup = ({
       <button
         key={value}
         type="button"
-        className={cn(buttonVariants({ type, fillWidth }))}
+        className={buttonVariants({ type, fillWidth })}
         aria-pressed={isActive}
         disabled={disabled}
         aria-disabled={disabled ? true : undefined}