diff --git a/packages/component-library/src/SingleToggleGroup/index.module.scss b/packages/component-library/src/SingleToggleGroup/index.module.scss
index bdc439cf14..08e1cf9e61 100644
--- a/packages/component-library/src/SingleToggleGroup/index.module.scss
+++ b/packages/component-library/src/SingleToggleGroup/index.module.scss
@@ -20,13 +20,15 @@
       transition-duration: 100ms;
       transition-timing-function: linear;
     }
+
     &[data-rounded] {
       border-radius: theme.border-radius("full");
+
       .bubble {
         border-radius: theme.border-radius("full");
       }
     }
-    
+
     &[data-selected] {
       color: theme.color("button", "solid", "foreground");
       pointer-events: none;
@@ -44,7 +46,6 @@
           );
         }
 
-
         &[data-pressed] .bubble {
           background-color: theme.color(
             "button",
diff --git a/packages/component-library/src/SingleToggleGroup/index.tsx b/packages/component-library/src/SingleToggleGroup/index.tsx
index fc8d8faa24..0177c6bbf5 100644
--- a/packages/component-library/src/SingleToggleGroup/index.tsx
+++ b/packages/component-library/src/SingleToggleGroup/index.tsx
@@ -66,7 +66,7 @@ export const SingleToggleGroup = ({
           )}
           data-size="sm"
           data-variant="ghost"
-          data-rounded={rounded ? true : undefined}
+          data-rounded={rounded ? "" : undefined}
           {...toggleButton}
         >
           {(args) => (