diff --git a/src/components/ButtonGroup/ButtonGroup.stories.tsx b/src/components/ButtonGroup/ButtonGroup.stories.tsx
index eca774e26..d16b1d18b 100644
--- a/src/components/ButtonGroup/ButtonGroup.stories.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.stories.tsx
@@ -21,6 +21,122 @@ export const Playground: StoryObj<typeof ButtonGroup> = {
     fillWidth: false,
     type: 'default',
     defaultSelected: 'option3',
+    'aria-label': 'Button group playground',
+  },
+};
+
+export const Default: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'default',
+  },
+};
+
+export const Borderless: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'borderless',
+  },
+};
+
+export const DefaultSelected: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'default',
+    selected: 'option1',
+  },
+};
+
+export const BorderlessSelected: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'borderless',
+    selected: 'option1',
+  },
+};
+
+export const WithDisabledButton: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Enabled', value: 'enabled' },
+      { label: 'Disabled', value: 'disabled', disabled: true },
+    ],
+    type: 'default',
+  },
+};
+
+export const WithDisabledSelectedButton: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Enabled', value: 'enabled' },
+      { label: 'Disabled Active', value: 'disabled', disabled: true },
+    ],
+    type: 'default',
+    selected: 'disabled',
+  },
+};
+
+export const FillWidthDefault: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+    ],
+    type: 'default',
+    fillWidth: true,
+  },
+};
+
+export const FillWidthBorderless: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+    ],
+    type: 'borderless',
+    fillWidth: true,
+  },
+};
+
+export const MultiSelectSelected: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'default',
+    multiple: true,
+    selected: new Set(['option1', 'option3']),
+  },
+};
+
+export const MultiSelectBorderless: StoryObj<typeof ButtonGroup> = {
+  args: {
+    options: [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ],
+    type: 'borderless',
+    multiple: true,
+    selected: new Set(['option1', 'option3']),
   },
 };
 
diff --git a/src/components/ButtonGroup/ButtonGroup.tsx b/src/components/ButtonGroup/ButtonGroup.tsx
index f419b441c..7895b2046 100644
--- a/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/src/components/ButtonGroup/ButtonGroup.tsx
@@ -24,6 +24,7 @@ export const ButtonGroup = ({
   onClick,
   type = 'default',
   multiple = false,
+  'aria-label': ariaLabel,
   ...props
 }: ButtonGroupProps) => {
   const [internalSelection, setInternalSelection] = useState<Set<string>>(() =>
@@ -75,7 +76,6 @@ export const ButtonGroup = ({
         $fillWidth={fillWidth}
         $type={type}
         onClick={() => onButtonGroupClickCommonHandler(value)}
-        role="button"
         {...buttonProps}
       >
         {label}
@@ -89,6 +89,7 @@ export const ButtonGroup = ({
       $fillWidth={fillWidth}
       $type={type}
       role="group"
+      aria-label={ariaLabel}
     >
       {buttons}
     </ButtonGroupWrapper>
@@ -115,10 +116,15 @@ const ButtonGroupWrapper = styled.div<{ $fillWidth: boolean; $type: ButtonGroupT
   width: ${({ $fillWidth }) => ($fillWidth ? '100%' : 'auto')};
 `;
 
-const Button = styled.button<{
+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;
@@ -139,12 +145,6 @@ const Button = styled.button<{
   cursor: pointer;
   border: none;
 
-  &[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};
-  }
-
   &:hover {
     background: ${({ theme }) => theme.click.button.group.color.background.hover};
     font: ${({ theme }) => theme.click.button.group.typography.label.hover};
diff --git a/src/components/ButtonGroup/ButtonGroup.types.ts b/src/components/ButtonGroup/ButtonGroup.types.ts
index afe9ed957..6b4bbd3d3 100644
--- a/src/components/ButtonGroup/ButtonGroup.types.ts
+++ b/src/components/ButtonGroup/ButtonGroup.types.ts
@@ -1,10 +1,10 @@
-import { HTMLAttributes, ReactNode } from 'react';
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 
 export type ButtonGroupType = 'default' | 'borderless';
 export type SelectionValue = string | Set<string>;
 
 export interface ButtonGroupElementProps extends Omit<
-  HTMLAttributes<HTMLButtonElement>,
+  ButtonHTMLAttributes<HTMLButtonElement>,
   'children'
 > {
   value: string;
diff --git a/tests/buttons/buttongroup.spec.ts b/tests/buttons/buttongroup.spec.ts
new file mode 100644
index 000000000..49f52d2f6
--- /dev/null
+++ b/tests/buttons/buttongroup.spec.ts
@@ -0,0 +1,456 @@
+import { test as it, expect } from '@playwright/test';
+import { getStoryUrl } from '../utils';
+
+const { describe, use } = it;
+
+describe('ButtonGroup Visual Regression', () => {
+  describe('Light Theme', () => {
+    describe('Type Variants', () => {
+      it('default type matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('buttons-buttongroup--default', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        await expect(group).toHaveScreenshot('buttongroup-default-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('borderless type matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('buttons-buttongroup--borderless', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        await expect(group).toHaveScreenshot('buttongroup-borderless-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+
+    describe('Selection States', () => {
+      it('default type with selection matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('buttons-buttongroup--default-selected', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        const activeButton = page.getByRole('button', { pressed: true });
+        await expect(activeButton).toBeVisible();
+        await expect(group).toHaveScreenshot('buttongroup-default-selected-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('borderless type with selection matches snapshot', async ({ page }) => {
+        await page.goto(
+          getStoryUrl('buttons-buttongroup--borderless-selected', 'light'),
+          {
+            waitUntil: 'networkidle',
+          }
+        );
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        const activeButton = page.getByRole('button', { pressed: true });
+        await expect(activeButton).toBeVisible();
+        await expect(group).toHaveScreenshot(
+          'buttongroup-borderless-selected-light.png',
+          {
+            maxDiffPixels: 100,
+          }
+        );
+      });
+    });
+
+    describe('Disabled States', () => {
+      it('with disabled button matches snapshot', async ({ page }) => {
+        await page.goto(
+          getStoryUrl('buttons-buttongroup--with-disabled-button', 'light'),
+          {
+            waitUntil: 'networkidle',
+          }
+        );
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        const disabledButton = page.getByRole('button', { name: 'Disabled' });
+        await expect(disabledButton).toBeDisabled();
+        await expect(group).toHaveScreenshot('buttongroup-disabled-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('with disabled and selected button matches snapshot', async ({ page }) => {
+        await page.goto(
+          getStoryUrl('buttons-buttongroup--with-disabled-selected-button', 'light'),
+          {
+            waitUntil: 'networkidle',
+          }
+        );
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        const disabledActiveButton = page.getByRole('button', {
+          name: 'Disabled Active',
+        });
+        await expect(disabledActiveButton).toBeDisabled();
+        await expect(disabledActiveButton).toHaveAttribute('aria-pressed', 'true');
+        await expect(group).toHaveScreenshot('buttongroup-disabled-active-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+
+    describe('Layout Variants', () => {
+      it('fill width default matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('buttons-buttongroup--fill-width-default', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        await expect(group).toHaveScreenshot('buttongroup-fill-width-default-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('fill width borderless matches snapshot', async ({ page }) => {
+        await page.goto(
+          getStoryUrl('buttons-buttongroup--fill-width-borderless', 'light'),
+          {
+            waitUntil: 'networkidle',
+          }
+        );
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        await expect(group).toHaveScreenshot(
+          'buttongroup-fill-width-borderless-light.png',
+          {
+            maxDiffPixels: 100,
+          }
+        );
+      });
+    });
+
+    describe('Multi-select', () => {
+      it('multi-select default matches snapshot', async ({ page }) => {
+        await page.goto(
+          getStoryUrl('buttons-buttongroup--multi-select-selected', 'light'),
+          {
+            waitUntil: 'networkidle',
+          }
+        );
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        const pressedButtons = page.getByRole('button', { pressed: true });
+        await expect(pressedButtons).toHaveCount(2);
+        await expect(group).toHaveScreenshot('buttongroup-multi-select-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('multi-select borderless matches snapshot', async ({ page }) => {
+        await page.goto(
+          getStoryUrl('buttons-buttongroup--multi-select-borderless', 'light'),
+          {
+            waitUntil: 'networkidle',
+          }
+        );
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        const pressedButtons = page.getByRole('button', { pressed: true });
+        await expect(pressedButtons).toHaveCount(2);
+        await expect(group).toHaveScreenshot(
+          'buttongroup-multi-select-borderless-light.png',
+          {
+            maxDiffPixels: 100,
+          }
+        );
+      });
+    });
+  });
+
+  describe('Dark Theme', () => {
+    describe('Type Variants', () => {
+      it('default type matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('buttons-buttongroup--default', 'dark'), {
+          waitUntil: 'networkidle',
+        });
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        await expect(group).toHaveScreenshot('buttongroup-default-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('borderless type matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('buttons-buttongroup--borderless', 'dark'), {
+          waitUntil: 'networkidle',
+        });
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        await expect(group).toHaveScreenshot('buttongroup-borderless-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+
+    describe('Selection States', () => {
+      it('default type with selection matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('buttons-buttongroup--default-selected', 'dark'), {
+          waitUntil: 'networkidle',
+        });
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        const activeButton = page.getByRole('button', { pressed: true });
+        await expect(activeButton).toBeVisible();
+        await expect(group).toHaveScreenshot('buttongroup-default-selected-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('borderless type with selection matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('buttons-buttongroup--borderless-selected', 'dark'), {
+          waitUntil: 'networkidle',
+        });
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        const activeButton = page.getByRole('button', { pressed: true });
+        await expect(activeButton).toBeVisible();
+        await expect(group).toHaveScreenshot('buttongroup-borderless-selected-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+
+    describe('Disabled States', () => {
+      it('with disabled button matches snapshot', async ({ page }) => {
+        await page.goto(
+          getStoryUrl('buttons-buttongroup--with-disabled-button', 'dark'),
+          {
+            waitUntil: 'networkidle',
+          }
+        );
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        const disabledButton = page.getByRole('button', { name: 'Disabled' });
+        await expect(disabledButton).toBeDisabled();
+        await expect(group).toHaveScreenshot('buttongroup-disabled-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('with disabled and selected button matches snapshot', async ({ page }) => {
+        await page.goto(
+          getStoryUrl('buttons-buttongroup--with-disabled-selected-button', 'dark'),
+          {
+            waitUntil: 'networkidle',
+          }
+        );
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        const disabledActiveButton = page.getByRole('button', {
+          name: 'Disabled Active',
+        });
+        await expect(disabledActiveButton).toBeDisabled();
+        await expect(disabledActiveButton).toHaveAttribute('aria-pressed', 'true');
+        await expect(group).toHaveScreenshot('buttongroup-disabled-active-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+
+    describe('Layout Variants', () => {
+      it('fill width default matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('buttons-buttongroup--fill-width-default', 'dark'), {
+          waitUntil: 'networkidle',
+        });
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        await expect(group).toHaveScreenshot('buttongroup-fill-width-default-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('fill width borderless matches snapshot', async ({ page }) => {
+        await page.goto(
+          getStoryUrl('buttons-buttongroup--fill-width-borderless', 'dark'),
+          {
+            waitUntil: 'networkidle',
+          }
+        );
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        await expect(group).toHaveScreenshot(
+          'buttongroup-fill-width-borderless-dark.png',
+          {
+            maxDiffPixels: 100,
+          }
+        );
+      });
+    });
+
+    describe('Multi-select', () => {
+      it('multi-select default matches snapshot', async ({ page }) => {
+        await page.goto(
+          getStoryUrl('buttons-buttongroup--multi-select-selected', 'dark'),
+          {
+            waitUntil: 'networkidle',
+          }
+        );
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        const pressedButtons = page.getByRole('button', { pressed: true });
+        await expect(pressedButtons).toHaveCount(2);
+        await expect(group).toHaveScreenshot('buttongroup-multi-select-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('multi-select borderless matches snapshot', async ({ page }) => {
+        await page.goto(
+          getStoryUrl('buttons-buttongroup--multi-select-borderless', 'dark'),
+          {
+            waitUntil: 'networkidle',
+          }
+        );
+        const group = page.getByRole('group');
+        await expect(group).toBeVisible({ timeout: 10000 });
+        const pressedButtons = page.getByRole('button', { pressed: true });
+        await expect(pressedButtons).toHaveCount(2);
+        await expect(group).toHaveScreenshot(
+          'buttongroup-multi-select-borderless-dark.png',
+          {
+            maxDiffPixels: 100,
+          }
+        );
+      });
+    });
+  });
+
+  describe('Interactive States', () => {
+    describe('Light Theme', () => {
+      it('hover state on button', async ({ page }) => {
+        await page.goto(getStoryUrl('buttons-buttongroup--default', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const button = page.getByRole('button').first();
+        await expect(button).toBeVisible({ timeout: 10000 });
+        await button.hover();
+        await page.waitForTimeout(100);
+        await expect(button).toHaveScreenshot('buttongroup-button-hover-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('focus state on button', async ({ page }) => {
+        await page.goto(getStoryUrl('buttons-buttongroup--default', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const button = page.getByRole('button').first();
+        await expect(button).toBeVisible({ timeout: 10000 });
+        await button.focus();
+        await page.waitForTimeout(100);
+        await expect(button).toHaveScreenshot('buttongroup-button-focus-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+
+    describe('Dark Theme', () => {
+      it('hover state on button', async ({ page }) => {
+        await page.goto(getStoryUrl('buttons-buttongroup--default', 'dark'), {
+          waitUntil: 'networkidle',
+        });
+        const button = page.getByRole('button').first();
+        await expect(button).toBeVisible({ timeout: 10000 });
+        await button.hover();
+        await page.waitForTimeout(100);
+        await expect(button).toHaveScreenshot('buttongroup-button-hover-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('focus state on button', async ({ page }) => {
+        await page.goto(getStoryUrl('buttons-buttongroup--default', 'dark'), {
+          waitUntil: 'networkidle',
+        });
+        const button = page.getByRole('button').first();
+        await expect(button).toBeVisible({ timeout: 10000 });
+        await button.focus();
+        await page.waitForTimeout(100);
+        await expect(button).toHaveScreenshot('buttongroup-button-focus-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('keyboard navigation works with Tab', async ({ page }) => {
+      await page.goto(getStoryUrl('buttons-buttongroup--default', 'light'), {
+        waitUntil: 'networkidle',
+      });
+      const buttons = page.getByRole('button');
+      await expect(buttons.first()).toBeVisible({ timeout: 10000 });
+
+      await page.locator('body').click();
+      await page.keyboard.press('Tab');
+      await expect(buttons.first()).toBeFocused();
+
+      await page.keyboard.press('Tab');
+      await expect(buttons.nth(1)).toBeFocused();
+    });
+
+    it('button can be activated with Space key', async ({ page }) => {
+      await page.goto(getStoryUrl('buttons-buttongroup--default', 'light'), {
+        waitUntil: 'networkidle',
+      });
+      const firstButton = page.getByRole('button').first();
+      await expect(firstButton).toBeVisible({ timeout: 10000 });
+
+      // Focus the button and activate with Space
+      await page.locator('body').click();
+      await page.keyboard.press('Tab');
+      await expect(firstButton).toBeFocused();
+      await page.keyboard.press('Space');
+
+      // Verify the button is now selected (aria-pressed="true")
+      await expect(firstButton).toHaveAttribute('aria-pressed', 'true');
+    });
+
+    it('button can be activated with Enter key', async ({ page }) => {
+      await page.goto(getStoryUrl('buttons-buttongroup--default', 'light'), {
+        waitUntil: 'networkidle',
+      });
+      const secondButton = page.getByRole('button').nth(1);
+      await expect(secondButton).toBeVisible({ timeout: 10000 });
+
+      // Focus the second button and activate with Enter
+      await page.locator('body').click();
+      await page.keyboard.press('Tab');
+      await page.keyboard.press('Tab');
+      await expect(secondButton).toBeFocused();
+      await page.keyboard.press('Enter');
+
+      // Verify the button is now selected (aria-pressed="true")
+      await expect(secondButton).toHaveAttribute('aria-pressed', 'true');
+    });
+
+    it('aria-pressed reflects selection', async ({ page }) => {
+      await page.goto(getStoryUrl('buttons-buttongroup--default-selected', 'light'), {
+        waitUntil: 'networkidle',
+      });
+      const activeButton = page.getByRole('button', { name: 'Option 1' });
+      await expect(activeButton).toHaveAttribute('aria-pressed', 'true');
+    });
+
+    it('group has accessible name when aria-label is provided', async ({ page }) => {
+      await page.goto(getStoryUrl('buttons-buttongroup--playground', 'light'), {
+        waitUntil: 'networkidle',
+      });
+      const group = page.getByRole('group');
+      await expect(group).toBeVisible({ timeout: 10000 });
+
+      await expect(group).toHaveAttribute('aria-label');
+    });
+  });
+});
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-borderless-dark-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-borderless-dark-chromium-linux.png
new file mode 100644
index 000000000..def79c1f9
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-borderless-dark-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-borderless-light-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-borderless-light-chromium-linux.png
new file mode 100644
index 000000000..58cc8b1d3
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-borderless-light-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-borderless-selected-dark-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-borderless-selected-dark-chromium-linux.png
new file mode 100644
index 000000000..34d19535a
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-borderless-selected-dark-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-borderless-selected-light-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-borderless-selected-light-chromium-linux.png
new file mode 100644
index 000000000..1315eb13c
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-borderless-selected-light-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-button-focus-dark-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-button-focus-dark-chromium-linux.png
new file mode 100644
index 000000000..ddb1dee17
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-button-focus-dark-chromium-linux.png differ
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
new file mode 100644
index 000000000..7a19fa353
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-button-focus-light-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-button-hover-dark-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-button-hover-dark-chromium-linux.png
new file mode 100644
index 000000000..1ac61a4d8
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-button-hover-dark-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-button-hover-light-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-button-hover-light-chromium-linux.png
new file mode 100644
index 000000000..22fcd0f63
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-button-hover-light-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-default-dark-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-default-dark-chromium-linux.png
new file mode 100644
index 000000000..6aaeb790b
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-default-dark-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-default-light-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-default-light-chromium-linux.png
new file mode 100644
index 000000000..faa64f415
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-default-light-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-default-selected-dark-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-default-selected-dark-chromium-linux.png
new file mode 100644
index 000000000..2ca870ab7
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-default-selected-dark-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-default-selected-light-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-default-selected-light-chromium-linux.png
new file mode 100644
index 000000000..c77869171
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-default-selected-light-chromium-linux.png differ
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
new file mode 100644
index 000000000..61be6a5f6
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-disabled-active-dark-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-disabled-active-light-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-disabled-active-light-chromium-linux.png
new file mode 100644
index 000000000..0c0892b59
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-disabled-active-light-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-disabled-dark-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-disabled-dark-chromium-linux.png
new file mode 100644
index 000000000..e9ba7b6bd
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-disabled-dark-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-disabled-light-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-disabled-light-chromium-linux.png
new file mode 100644
index 000000000..f9d7983ae
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-disabled-light-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-fill-width-borderless-dark-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-fill-width-borderless-dark-chromium-linux.png
new file mode 100644
index 000000000..0d66d6fb5
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-fill-width-borderless-dark-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-fill-width-borderless-light-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-fill-width-borderless-light-chromium-linux.png
new file mode 100644
index 000000000..49b5038d9
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-fill-width-borderless-light-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-fill-width-default-dark-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-fill-width-default-dark-chromium-linux.png
new file mode 100644
index 000000000..3fa17ed99
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-fill-width-default-dark-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-fill-width-default-light-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-fill-width-default-light-chromium-linux.png
new file mode 100644
index 000000000..db2014785
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-fill-width-default-light-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-multi-select-borderless-dark-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-multi-select-borderless-dark-chromium-linux.png
new file mode 100644
index 000000000..67e65a470
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-multi-select-borderless-dark-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-multi-select-borderless-light-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-multi-select-borderless-light-chromium-linux.png
new file mode 100644
index 000000000..61f7d8479
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-multi-select-borderless-light-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-multi-select-dark-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-multi-select-dark-chromium-linux.png
new file mode 100644
index 000000000..ec507d616
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-multi-select-dark-chromium-linux.png differ
diff --git a/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-multi-select-light-chromium-linux.png b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-multi-select-light-chromium-linux.png
new file mode 100644
index 000000000..05b8337fd
Binary files /dev/null and b/tests/buttons/buttongroup.spec.ts-snapshots/buttongroup-multi-select-light-chromium-linux.png differ
diff --git a/tests/buttons/overview.spec.ts b/tests/buttons/overview.spec.ts
index 35d62dfcc..004c39d13 100644
--- a/tests/buttons/overview.spec.ts
+++ b/tests/buttons/overview.spec.ts
@@ -56,7 +56,7 @@ describe('Buttons', () => {
     });
 
     it(`should render ${id}, on first element click`, async ({ page }) => {
-      const button = page.locator('[role="button"]:nth-child(1)');
+      const button = page.getByRole('button').first();
 
       await expect(button).toBeVisible({ timeout: 10_000 });
 
@@ -69,7 +69,7 @@ describe('Buttons', () => {
     });
 
     it(`should ${id}, on second element click have aria-pressed`, async ({ page }) => {
-      const button = page.locator('[role="button"]:nth-child(2)');
+      const button = page.getByRole('button').nth(1);
 
       await expect(button).toBeVisible({ timeout: 10_000 });