diff --git a/src/components/SectionNav.spec.tsx b/src/components/ButtonNav.spec.tsx
similarity index 85%
rename from src/components/SectionNav.spec.tsx
rename to src/components/ButtonNav.spec.tsx
index 85d269d6c..1548128be 100644
--- a/src/components/SectionNav.spec.tsx
+++ b/src/components/ButtonNav.spec.tsx
@@ -1,7 +1,7 @@
-import { SectionNav } from './SectionNav/index';
+import { ButtonNav } from './ButtonNav/index';
 import renderer from 'react-test-renderer';
 
-describe('SectionNav', () => {
+describe('ButtonNav', () => {
 
   const childrenListWithKeys = [
     <button key='1'>Slide 1</button>,
@@ -16,26 +16,26 @@ describe('SectionNav', () => {
 
   it('matches snapshot', () => {
     const tree = renderer.create(
-      <SectionNav
+      <ButtonNav
         handlePrevArrow={handlePrev}
         handleNextArrow={handleNext}
       >
         {childrenListWithKeys}
-      </SectionNav>
+      </ButtonNav>
     ).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('matches snapshot when arrows are disabled', () => {
     const tree = renderer.create(
-      <SectionNav
+      <ButtonNav
         handlePrevArrow={handlePrev}
         handleNextArrow={handleNext}
         isPrevArrowDisabled
         isNextArrowDisabled
       >
         {childrenListWithKeys}
-      </SectionNav>
+      </ButtonNav>
     ).toJSON();
     expect(tree).toMatchSnapshot();
   });
diff --git a/src/components/SectionNav.stories.tsx b/src/components/ButtonNav.stories.tsx
similarity index 64%
rename from src/components/SectionNav.stories.tsx
rename to src/components/ButtonNav.stories.tsx
index 0cb1e038a..42513cf95 100644
--- a/src/components/SectionNav.stories.tsx
+++ b/src/components/ButtonNav.stories.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { SectionNav } from "./SectionNav/index";
+import { ButtonNav } from "./ButtonNav/index";
 import { ToggleButtonGroup } from "./ToggleButtonGroup/index";
 import { Key } from "react-aria-components";
 
@@ -28,14 +28,14 @@ export const Default = () => {
 
   return (
     <>
-      <SectionNav
+      <ButtonNav
         handlePrevArrow={handlePrevArrow}
         handleNextArrow={handleNextArrow}
         isPrevArrowDisabled={selectedIndex === 0}
         isNextArrowDisabled={selectedIndex === childrenListWithKeys.length - 1}
       >
         {[childrenListWithKeys]}
-      </SectionNav>
+      </ButtonNav>
       <span>Selected section: {selectedIndex + 1}</span>
     </>
 
@@ -68,38 +68,36 @@ export const WithToggleButtonGroups = () => {
 
   const flattenedSections = sections.flat();
 
-  const [selectedItems, setSelectedItems] = React.useState(new Set<Key>([flattenedSections[0].id]));
+  const [selectedItem, setSelectedItem] = React.useState<string>(flattenedSections ? flattenedSections[0].id : '');
 
-  const scrollToIndex = (id: Key) => {
-    const child = document.querySelector(`[data-button-id="${id}"]`) as HTMLElement;
+  const scrollNavToSection = (sectionDataId: string) => {
+    const child = document.querySelector<HTMLElement>(`[data-button-id="${sectionDataId}"]`);
     if (child) {
       child.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
     }
   };
 
   const handlePrevArrow = () => {
-    setSelectedItems((prev) => {
-      const newSet = new Set<Key>();
-      const firstSectionKeys = flattenedSections.map(section => section.id);
-      const currentIndex = firstSectionKeys.indexOf([...prev][0] as string);
+    setSelectedItem((prev) => {
+      const currentIndex =  flattenedSections.findIndex((element) => element.id === prev);
+      let newSelectedItem = prev;
       if (currentIndex > 0) {
-        newSet.add(firstSectionKeys[currentIndex - 1]);
-        scrollToIndex(firstSectionKeys[currentIndex - 1]);
+        newSelectedItem = flattenedSections[currentIndex - 1].id;
+        scrollNavToSection(newSelectedItem);
       }
-      return newSet;
+      return newSelectedItem;
     });
   };
 
   const handleNextArrow = () => {
-    setSelectedItems((prev) => {
-      const newSet = new Set<Key>();
-      const firstSectionKeys = flattenedSections.map(section => section.id);
-      const currentIndex = firstSectionKeys.indexOf([...prev][0] as string);
-      if (currentIndex < firstSectionKeys.length - 1) {
-        newSet.add(firstSectionKeys[currentIndex + 1]);
-        scrollToIndex(firstSectionKeys[currentIndex + 1]);
+    setSelectedItem((prev) => {
+      const currentIndex =  flattenedSections.findIndex((element) => element.id === prev);
+      let newSelectedItem = prev;
+      if (currentIndex < flattenedSections.length - 1) {
+        newSelectedItem = flattenedSections[currentIndex + 1].id;
+        scrollNavToSection(newSelectedItem);
       }
-      return newSet;
+      return newSelectedItem;
     });
   };
 
@@ -107,23 +105,26 @@ export const WithToggleButtonGroups = () => {
     (sectionSet, index) => 
       <ToggleButtonGroup
         key={`section-${index + 1}`}
-        selectedItems={selectedItems}
-        onSelectionChange={setSelectedItems}
+        selectedItems={new Set<Key>([selectedItem])}
+        onSelectionChange={(newSet) => setSelectedItem(newSet.size ? [...newSet][0] as string : '')}
         items={sectionSet}
       />
   );
 
   return (
     <>
-      <SectionNav
+      <ButtonNav
         handlePrevArrow={handlePrevArrow}
         handleNextArrow={handleNextArrow}
-        isPrevArrowDisabled={selectedItems.has(flattenedSections[0].id) || selectedItems.size === 0}
-        isNextArrowDisabled={selectedItems.has(flattenedSections[flattenedSections.length - 1].id) || selectedItems.size === 0}
+        isPrevArrowDisabled={selectedItem === flattenedSections[0].id || selectedItem.length === 0}
+        isNextArrowDisabled={
+          selectedItem === flattenedSections[flattenedSections.length - 1].id || 
+          selectedItem.length === 0
+        }
       >
         {ToggleGroup}
-      </SectionNav>
-      <p>Current selections: {[...selectedItems].join(', ')}</p>
+      </ButtonNav>
+      <p>Current selected: {selectedItem}</p>
     </>
   );
 
diff --git a/src/components/SectionNav/index.tsx b/src/components/ButtonNav/index.tsx
similarity index 74%
rename from src/components/SectionNav/index.tsx
rename to src/components/ButtonNav/index.tsx
index 1bb940b69..e4e14c299 100644
--- a/src/components/SectionNav/index.tsx
+++ b/src/components/ButtonNav/index.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 import {
-  SectionNavContainer,
-  SectionNavWrapper,
-  SectionNavGroup,
+  ButtonNavContainer,
+  ButtonNavWrapper,
+  ButtonNavGroup,
   StyledArrow,
 } from './styles';
 import { LeftArrow } from "../svgs/LeftArrow";
 import { RightArrow } from "../svgs/RightArrow";
 
-export interface SectionNavProps {
+export interface ButtonNavProps {
   children: React.ReactNode[];
   handlePrevArrow: () => void;
   handleNextArrow: () => void;
@@ -16,18 +16,18 @@ export interface SectionNavProps {
   isNextArrowDisabled?: boolean;
 }
 
-export const SectionNav = (
+export const ButtonNav = (
   {
     children,
     handlePrevArrow,
     handleNextArrow,
     isPrevArrowDisabled = false,
     isNextArrowDisabled = false
-  }: SectionNavProps) => {
+  }: ButtonNavProps) => {
   const wrapperRef = React.useRef<HTMLDivElement>(null);
 
   return (
-    <SectionNavContainer>
+    <ButtonNavContainer>
       <StyledArrow
         onClick={handlePrevArrow}
         className="left-arrow"
@@ -36,13 +36,13 @@ export const SectionNav = (
       >
         <LeftArrow width={14} height={14} />
       </StyledArrow>
-      <SectionNavWrapper ref={wrapperRef} >
+      <ButtonNavWrapper ref={wrapperRef} >
         {children.map((child, index) =>
-          <SectionNavGroup key={`section-group-${index + 1}`} >
+          <ButtonNavGroup key={`section-group-${index + 1}`} >
             {child}
-          </SectionNavGroup>
+          </ButtonNavGroup>
         )}
-      </SectionNavWrapper>
+      </ButtonNavWrapper>
       <StyledArrow
         onClick={handleNextArrow}
         className="right-arrow"
@@ -50,6 +50,6 @@ export const SectionNav = (
         disabled={isNextArrowDisabled} >
         <RightArrow width={14} height={14} />
       </StyledArrow>
-    </SectionNavContainer>
+    </ButtonNavContainer>
   );
 };
\ No newline at end of file
diff --git a/src/components/SectionNav/styles.ts b/src/components/ButtonNav/styles.ts
similarity index 87%
rename from src/components/SectionNav/styles.ts
rename to src/components/ButtonNav/styles.ts
index 2297dc2d3..3e2e8fb08 100644
--- a/src/components/SectionNav/styles.ts
+++ b/src/components/ButtonNav/styles.ts
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { palette } from '../../theme/palette';
 
-export const SectionNavContainer = styled.div`
+export const ButtonNavContainer = styled.div`
   position: relative;
   display: flex;
   justify-content: space-between;
@@ -10,7 +10,7 @@ export const SectionNavContainer = styled.div`
   max-width: fit-content;
 `;
 
-export const SectionNavWrapper = styled.div`
+export const ButtonNavWrapper = styled.div`
   display: flex;
   position: inherit;
   overflow-x: auto;
@@ -18,7 +18,7 @@ export const SectionNavWrapper = styled.div`
   transition: transform 0.3s ease-in-out;
 `;
 
-export const SectionNavGroup = styled.div`
+export const ButtonNavGroup = styled.div`
   flex: 0 0 auto;
   &:not(:last-child) {
     margin-right: 0.8rem;
diff --git a/src/components/ToggleButtonGroup.stories.tsx b/src/components/ToggleButtonGroup.stories.tsx
index c1a9f41f3..bfdba5ab2 100644
--- a/src/components/ToggleButtonGroup.stories.tsx
+++ b/src/components/ToggleButtonGroup.stories.tsx
@@ -26,15 +26,15 @@ export const MultipleSelection = () => {
 };
 
 export const SingleSelection = () => {
-  const [selectedItems, setSelectedItems] = React.useState(new Set<Key>([]));
+  const [selectedItem, setSelectedItem] = React.useState('');
   return (
     <>
       <ToggleButtonGroup
-        selectedItems={selectedItems}
-        onSelectionChange={setSelectedItems}
+        selectedItems={new Set<Key>([selectedItem])}
+        onSelectionChange={(newSet) => setSelectedItem(newSet.size ? [...newSet][0] as string : '')}
         items={childrenListWithKeys}
       />
-      <p>Current selections: {[...selectedItems].join(', ')}</p>
+      <p>Current selections: {selectedItem}</p>
     </>
   );
 };
diff --git a/src/components/ToggleButtonGroup/index.tsx b/src/components/ToggleButtonGroup/index.tsx
index 5dd6479b4..5d17c2410 100644
--- a/src/components/ToggleButtonGroup/index.tsx
+++ b/src/components/ToggleButtonGroup/index.tsx
@@ -1,11 +1,10 @@
-import React from "react";
 import { StyledToggleButtonGroup, StyledToggleButton } from "./styles";
 import { Key } from "react-aria-components";
 
 export interface ToggleButtonGroupProps {
   items: { id: string, value: string }[];
-  selectedItems: Set<Key>;
-  onSelectionChange?: React.Dispatch<React.SetStateAction<Set<Key>>>;
+  selectedItems?: Iterable<Key>;
+  onSelectionChange?: ((keys: Set<Key>) => void);
   selectionMode?: 'single' | 'multiple';
   className?: string;
 }
diff --git a/src/components/ToggleButtonGroup/styles.ts b/src/components/ToggleButtonGroup/styles.ts
index 6d4d88948..2ef61c3b5 100644
--- a/src/components/ToggleButtonGroup/styles.ts
+++ b/src/components/ToggleButtonGroup/styles.ts
@@ -17,6 +17,7 @@ export const StyledToggleButton = styled(ToggleButton)`
   font-size: 1.6rem;
   line-height: 2rem;
   white-space: nowrap;
+  user-select: none;
 
   & + & {
     border-left: none;
diff --git a/src/components/__snapshots__/SectionNav.spec.tsx.snap b/src/components/__snapshots__/ButtonNav.spec.tsx.snap
similarity index 97%
rename from src/components/__snapshots__/SectionNav.spec.tsx.snap
rename to src/components/__snapshots__/ButtonNav.spec.tsx.snap
index 3754644fc..a115398b0 100644
--- a/src/components/__snapshots__/SectionNav.spec.tsx.snap
+++ b/src/components/__snapshots__/ButtonNav.spec.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SectionNav matches snapshot 1`] = `
+exports[`ButtonNav matches snapshot 1`] = `
 <div
   className="sc-bczRLJ caOXAc"
 >
@@ -84,7 +84,7 @@ exports[`SectionNav matches snapshot 1`] = `
 </div>
 `;
 
-exports[`SectionNav matches snapshot when arrows are disabled 1`] = `
+exports[`ButtonNav matches snapshot when arrows are disabled 1`] = `
 <div
   className="sc-bczRLJ caOXAc"
 >
diff --git a/src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap b/src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap
index c39b485f9..82ce8e245 100644
--- a/src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap
+++ b/src/components/__snapshots__/ToggleButtonGroup.spec.tsx.snap
@@ -13,7 +13,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
 >
   <button
     aria-pressed={true}
-    className="sc-dkzDqf jDeGjH"
+    className="sc-dkzDqf cQxaky"
     data-button-id="red"
     data-rac=""
     data-selected={true}
@@ -37,7 +37,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
   </button>
   <button
     aria-pressed={false}
-    className="sc-dkzDqf jDeGjH"
+    className="sc-dkzDqf cQxaky"
     data-button-id="green"
     data-rac=""
     disabled={false}
@@ -60,7 +60,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
   </button>
   <button
     aria-pressed={false}
-    className="sc-dkzDqf jDeGjH"
+    className="sc-dkzDqf cQxaky"
     data-button-id="blue"
     data-rac=""
     disabled={false}
@@ -83,7 +83,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
   </button>
   <button
     aria-pressed={false}
-    className="sc-dkzDqf jDeGjH"
+    className="sc-dkzDqf cQxaky"
     data-button-id="yellow"
     data-rac=""
     disabled={false}
@@ -106,7 +106,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode multiple 1`] = `
   </button>
   <button
     aria-pressed={false}
-    className="sc-dkzDqf jDeGjH"
+    className="sc-dkzDqf cQxaky"
     data-button-id="orange"
     data-rac=""
     disabled={false}
@@ -143,7 +143,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
 >
   <button
     aria-checked={true}
-    className="sc-dkzDqf jDeGjH"
+    className="sc-dkzDqf cQxaky"
     data-button-id="red"
     data-rac=""
     data-selected={true}
@@ -168,7 +168,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf jDeGjH"
+    className="sc-dkzDqf cQxaky"
     data-button-id="green"
     data-rac=""
     disabled={false}
@@ -192,7 +192,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf jDeGjH"
+    className="sc-dkzDqf cQxaky"
     data-button-id="blue"
     data-rac=""
     disabled={false}
@@ -216,7 +216,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf jDeGjH"
+    className="sc-dkzDqf cQxaky"
     data-button-id="yellow"
     data-rac=""
     disabled={false}
@@ -240,7 +240,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode single 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf jDeGjH"
+    className="sc-dkzDqf cQxaky"
     data-button-id="orange"
     data-rac=""
     disabled={false}
@@ -278,7 +278,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
 >
   <button
     aria-checked={true}
-    className="sc-dkzDqf jDeGjH"
+    className="sc-dkzDqf cQxaky"
     data-button-id="red"
     data-rac=""
     data-selected={true}
@@ -303,7 +303,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf jDeGjH"
+    className="sc-dkzDqf cQxaky"
     data-button-id="green"
     data-rac=""
     disabled={false}
@@ -327,7 +327,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf jDeGjH"
+    className="sc-dkzDqf cQxaky"
     data-button-id="blue"
     data-rac=""
     disabled={false}
@@ -351,7 +351,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf jDeGjH"
+    className="sc-dkzDqf cQxaky"
     data-button-id="yellow"
     data-rac=""
     disabled={false}
@@ -375,7 +375,7 @@ exports[`ToggleButtonGroup matches snapshot with selectionMode undefined 1`] = `
   </button>
   <button
     aria-checked={false}
-    className="sc-dkzDqf jDeGjH"
+    className="sc-dkzDqf cQxaky"
     data-button-id="orange"
     data-rac=""
     disabled={false}
diff --git a/src/index.ts b/src/index.ts
index 8106c4c17..afac93bba 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -25,7 +25,7 @@ export * from './components/Text';
 export * from './components/ToastContainer';
 export * from './components/Tooltip';
 export * as Forms from './components/forms';
-export * from './components/SectionNav';
+export * from './components/ButtonNav';
 export * from './components/ToggleButtonGroup';
 export * from './constants';
 export * from './contexts';