From b558c11251bce58691351d4c4bb5b800fe64ab60 Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Wed, 4 Feb 2026 17:17:32 +0200
Subject: [PATCH 1/2] Add storybook case for ButtonGroup

---
 src/components/button/button.stories.js      | 24 +--------
 src/components/button/buttonGroup.js         | 42 ++++++++-------
 src/components/button/buttonGroup.stories.js | 55 ++++++++++++++++++++
 3 files changed, 80 insertions(+), 41 deletions(-)
 create mode 100644 src/components/button/buttonGroup.stories.js

diff --git a/src/components/button/button.stories.js b/src/components/button/button.stories.js
index 5a8c9a327..db954ea48 100644
--- a/src/components/button/button.stories.js
+++ b/src/components/button/button.stories.js
@@ -1,5 +1,5 @@
-import React, { useState } from "react"
-import { Button, IconButton, ButtonGroup } from "."
+import React from "react"
+import { Button, IconButton } from "."
 import { iconsList } from "@/components/icon"
 
 const icons = Object.keys(iconsList)
@@ -17,26 +17,6 @@ export const BaseIconButton = args => (
   />
 )
 
-const radioButtonItems = [
-  { label: "One", value: 1 },
-  { label: "Two", value: 2 },
-  { label: "Three", value: 3 },
-]
-
-export const RadioButtonGroup = args => {
-  const [checked, setChecked] = useState(1)
-  const onChange = value => setChecked(value)
-
-  return (
-    <ButtonGroup
-      items={radioButtonItems.map(item => ({ ...args, ...item }))}
-      checked={checked}
-      buttonProps={args}
-      onChange={onChange}
-    />
-  )
-}
-
 export default {
   component: Button,
   tags: ["autodocs"],
diff --git a/src/components/button/buttonGroup.js b/src/components/button/buttonGroup.js
index 8736cb62f..bf60450c5 100644
--- a/src/components/button/buttonGroup.js
+++ b/src/components/button/buttonGroup.js
@@ -1,4 +1,4 @@
-import React, { Children, isValidElement, cloneElement } from "react"
+import React, { Children, isValidElement, cloneElement, useCallback } from "react"
 import Flex from "@/components/templates/flex"
 import { Button } from "./button"
 
@@ -30,24 +30,28 @@ const Content = ({ children }) => {
   )
 }
 
-const RadioButtons = ({ items, checked, buttonProps = {}, onChange }) => (
-  <>
-    {items.map(({ label, value, title }, index) => {
-      const buttonGroupProps = getButtonGroupProps(index, items.length)
-      return (
-        <Button
-          key={value}
-          label={label}
-          onClick={() => onChange(value)}
-          {...(title ? { title } : {})}
-          {...(checked != value ? { flavour: "hollow" } : {})}
-          {...buttonGroupProps}
-          {...buttonProps}
-        />
-      )
-    })}
-  </>
-)
+const RadioButtons = ({ items, checked, buttonProps = {}, onChange }) => {
+  return (
+    <>
+      {items.map(({ label, value, title }, index) => {
+        const buttonGroupProps = getButtonGroupProps(index, items.length)
+        const isChecked = checked === value || (Array.isArray(checked) && checked.includes(value))
+
+        return (
+          <Button
+            key={value}
+            label={label}
+            onClick={() => onChange(value)}
+            {...(title ? { title } : {})}
+            {...(!isChecked ? { flavour: "hollow" } : {})}
+            {...buttonGroupProps}
+            {...buttonProps}
+          />
+        )
+      })}
+    </>
+  )
+}
 
 export const ButtonGroup = ({ items, checked, onChange, children, buttonProps, ...props }) => (
   <Flex alignItems="center" {...props}>
diff --git a/src/components/button/buttonGroup.stories.js b/src/components/button/buttonGroup.stories.js
new file mode 100644
index 000000000..5818889ec
--- /dev/null
+++ b/src/components/button/buttonGroup.stories.js
@@ -0,0 +1,55 @@
+import React, { useCallback, useState } from "react"
+import { ButtonGroup } from "."
+
+export const RadioButtonGroup = args => {
+  const [checked, setChecked] = useState(args.checked)
+
+  return (
+    <ButtonGroup
+      items={args.items.map(item => ({ ...item }))}
+      checked={checked}
+      buttonProps={args}
+      onChange={setChecked}
+    />
+  )
+}
+
+export const MultiButtonGroup = args => {
+  const [checked, setChecked] = useState([args.checked])
+
+  const onChange = useCallback(
+    value => {
+      setChecked(prev => {
+        if (prev.includes(value)) return prev.filter(v => v !== value)
+        return [...prev, value]
+      })
+    },
+    [setChecked]
+  )
+
+  return (
+    <ButtonGroup
+      items={args.items.map(item => ({ ...item }))}
+      checked={checked}
+      buttonProps={args}
+      onChange={onChange}
+    />
+  )
+}
+
+export default {
+  component: ButtonGroup,
+  tags: ["autodocs"],
+  args: {
+    items: [
+      { label: "One", value: 1 },
+      { label: "Two", value: 2 },
+      { label: "Three", value: 3 },
+    ],
+    checked: 1,
+    buttonProps: {},
+  },
+  argTypes: {
+    checked: { control: "text" },
+  },
+}

From e78aac064f0d7270588cec4c41bfa5fbdeeddce9 Mon Sep 17 00:00:00 2001
From: John Kapantzakis <kapantzak@gmail.com>
Date: Wed, 4 Feb 2026 17:19:02 +0200
Subject: [PATCH 2/2] v5.2.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d0297bd67..6217e4e26 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/netdata-ui",
-  "version": "5.2.2",
+  "version": "5.2.3",
   "description": "netdata UI kit",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",