diff --git a/src/components/atoms/Button/Button.js b/src/components/atoms/Button/Button.js
index 396fab31..5f0b597e 100644
--- a/src/components/atoms/Button/Button.js
+++ b/src/components/atoms/Button/Button.js
@@ -12,23 +12,23 @@ export default class Button extends HTMLElement {
 
   connectedCallback() {
     // Button attributes
-    const close = this.getAttribute('data-close');
-    const link = this.getAttribute('data-link');
-    const btnID = this.getAttribute('data-id');
-    const ariaLabel = this.getAttribute('data-aria-label');
-    const primary = this.getAttribute('data-primary');
-    const backgroundColor = this.getAttribute('data-background-color');
-    const shape = this.getAttribute('data-shape');
-    const icon = this.getAttribute('data-icon');
-    const iconSize = this.getAttribute('data-icon-size');
-    const iconOrder = this.getAttribute('data-icon-order');
-    const hiddenLabel = this.getAttribute('data-hidden-label');
-    const imgSrc = this.getAttribute('data-img');
-    const imgAlt = this.getAttribute('data-img-alt');
-    const size = this.getAttribute('data-size');
-    const extraClasses = this.getAttribute('data-extra-classes');
-    const label = this.getAttribute('data-label');
-    const disableStatus = this.getAttribute('data-disable');
+    const close = this.hasAttribute('close');
+    const link = this.getAttribute('link');
+    const btnID = this.getAttribute('id');
+    const ariaLabel = this.getAttribute('aria-label');
+    const primary = this.hasAttribute('primary');
+    const backgroundColor = this.getAttribute('background-color');
+    const shape = this.getAttribute('shape');
+    const icon = this.getAttribute('icon');
+    const iconSize = this.getAttribute('icon-size');
+    const iconOrder = this.getAttribute('icon-order');
+    const hiddenLabel = this.getAttribute('hidden-label');
+    const imgSrc = this.getAttribute('img');
+    const imgAlt = this.getAttribute('img-alt');
+    const size = this.getAttribute('size');
+    const extraClasses = this.getAttribute('extra-classes');
+    const label = this.getAttribute('label');
+    const disableStatus = this.hasAttribute('disabled');
     // Building Button component
     const btn = document.createElement('button');
     const btnClasses = ['btn'];
@@ -38,9 +38,9 @@ export default class Button extends HTMLElement {
     }
     disableStatus === 'true' ? (btn.disabled = true) : (btn.disabled = false);
     btn.setAttribute('aria-label', `${ariaLabel || ''}`);
-    if (primary === 'true') {
+    if (primary) {
       btnClasses.push(`btn-${backgroundColor}`);
-    } else if (primary === 'false') {
+    } else {
       btnClasses.push(`btn-outline-${backgroundColor}`);
     }
     shape === 'square'
@@ -51,7 +51,9 @@ export default class Button extends HTMLElement {
     imgAlt
       ? btnClasses.push('cod-button--img')
       : btnClasses.push('cod-button--not-img');
-    close === 'true' ? btnClasses.push('btn-close') : 0;
+    if (close) {
+      btnClasses.push('btn-close');
+    }
     btn.className = btnClasses.join(' ');
 
     if (icon) {
diff --git a/src/components/atoms/ModalFooter/ModalFooter.js b/src/components/atoms/ModalFooter/ModalFooter.js
index 113b5c2a..7b965eb1 100644
--- a/src/components/atoms/ModalFooter/ModalFooter.js
+++ b/src/components/atoms/ModalFooter/ModalFooter.js
@@ -46,9 +46,9 @@ export default class ModalFooter extends HTMLElement {
     const extraClasses = this.getAttribute('data-extra-classes');
 
     const modalFooterClasses = ['modal-footer'];
-    this.closeBtn.setAttribute('data-img-alt', '');
-    this.closeBtn.setAttribute('data-icon', '');
-    this.closeBtn.setAttribute('data-label', 'Close');
+    this.closeBtn.setAttribute('img-alt', '');
+    this.closeBtn.setAttribute('icon', '');
+    this.closeBtn.setAttribute('label', 'Close');
     this.closeBtn.setAttribute('data-bs-dismiss', 'modal');
 
     // TODO: Fix old ESLint errors - see issue #1099
diff --git a/src/components/atoms/ModalHeader/ModalHeader.js b/src/components/atoms/ModalHeader/ModalHeader.js
index 41e49b61..00a67c2b 100644
--- a/src/components/atoms/ModalHeader/ModalHeader.js
+++ b/src/components/atoms/ModalHeader/ModalHeader.js
@@ -52,9 +52,9 @@ export default class ModalHeader extends HTMLElement {
     const modalHeaderClasses = ['modal-header'];
     this.modalTitle.className = 'modal-title';
     this.modalTitle.id = `${parentID}-label`;
-    this.closeBtn.setAttribute('data-img-alt', '');
-    this.closeBtn.setAttribute('data-icon', '');
-    this.closeBtn.setAttribute('data-close', 'true');
+    this.closeBtn.setAttribute('img-alt', '');
+    this.closeBtn.setAttribute('icon', '');
+    this.closeBtn.setAttribute('close', 'true');
     this.closeBtn.setAttribute('data-bs-dismiss', 'modal');
 
     // TODO: Fix old ESLint errors - see issue #1099
@@ -66,7 +66,7 @@ export default class ModalHeader extends HTMLElement {
     // TODO: Fix old ESLint errors - see issue #1099
     // eslint-disable-next-line eqeqeq
     btnDark == 'true'
-      ? this.closeBtn.setAttribute('data-extra-classes', 'btn-close-white')
+      ? this.closeBtn.setAttribute('extra-classes', 'btn-close-white')
       : 0;
     this.modalHeader.className = modalHeaderClasses.join(' ');
     this.closeBtn.addEventListener('click', this._onClick);
diff --git a/src/components/atoms/OffcanvasHeader/OffcanvasHeader.js b/src/components/atoms/OffcanvasHeader/OffcanvasHeader.js
index 8d1df28d..93ba6c47 100644
--- a/src/components/atoms/OffcanvasHeader/OffcanvasHeader.js
+++ b/src/components/atoms/OffcanvasHeader/OffcanvasHeader.js
@@ -47,9 +47,9 @@ export default class OffcanvasHeader extends HTMLElement {
     const offcanvasHeaderClasses = ['offcanvas-header'];
     this.offcanvasTitle.className = 'offcanvas-title';
     this.offcanvasTitle.id = `${parentID}-label`;
-    this.closeBtn.setAttribute('data-img-alt', '');
-    this.closeBtn.setAttribute('data-icon', '');
-    this.closeBtn.setAttribute('data-close', 'true');
+    this.closeBtn.setAttribute('img-alt', '');
+    this.closeBtn.setAttribute('icon', '');
+    this.closeBtn.setAttribute('close', 'true');
     this.closeBtn.setAttribute('data-bs-dismiss', parentID);
     extraClasses ? offcanvasHeaderClasses.push(extraClasses) : 0;
     btnDark === 'true'
diff --git a/src/components/organisms/Map/Map.js b/src/components/organisms/Map/Map.js
index d6f104d4..e57563ee 100644
--- a/src/components/organisms/Map/Map.js
+++ b/src/components/organisms/Map/Map.js
@@ -214,16 +214,16 @@ export default class Map extends HTMLElement {
             closeMapBtn.addEventListener('click', () => {
               app[0] ? app[0].setAttribute('data-app-state', 'results') : 0;
             });
-            closeMapBtn.setAttribute('data-primary', true);
-            closeMapBtn.setAttribute('data-label', 'x');
-            closeMapBtn.setAttribute('data-size', 'large');
+            closeMapBtn.setAttribute('primary', true);
+            closeMapBtn.setAttribute('label', 'x');
+            closeMapBtn.setAttribute('size', 'large');
             closeMapBtn.setAttribute('data-hover', false);
-            closeMapBtn.setAttribute('data-background-color', 'warning');
-            closeMapBtn.setAttribute('data-img', '');
-            closeMapBtn.setAttribute('data-img-alt', '');
-            closeMapBtn.setAttribute('data-icon', '');
-            closeMapBtn.setAttribute('data-shape', 'square');
-            closeMapBtn.setAttribute('data-extra-classes', 'fw-bold');
+            closeMapBtn.setAttribute('background-color', 'warning');
+            closeMapBtn.setAttribute('img', '');
+            closeMapBtn.setAttribute('img-alt', '');
+            closeMapBtn.setAttribute('icon', '');
+            closeMapBtn.setAttribute('shape', 'square');
+            closeMapBtn.setAttribute('extra-classes', 'fw-bold');
             this.mapWrapper.appendChild(closeMapBtn);
             app[0] ? app[0].setAttribute('data-map-state', 'init') : 0;
             break;
diff --git a/src/stories/button.stories.js b/src/stories/button.stories.js
index 7f5fde8e..e55b044d 100644
--- a/src/stories/button.stories.js
+++ b/src/stories/button.stories.js
@@ -8,7 +8,7 @@ export default {
     primary: {
       control: { type: 'boolean' },
     },
-    disable: COMMON_STORY_ARGS.disabled,
+    disabled: COMMON_STORY_ARGS.disabled,
     // TODO: Make this attr name and accepted
     // values consistent with other action button, progress bar,
     // etc. Issue #202.
@@ -35,36 +35,36 @@ const Template = (args) => {
   btn.addEventListener('click', (e) => {
     args.onclick(e);
   });
-  btn.setAttribute('data-primary', args.primary);
-  btn.setAttribute('data-disable', args.disable);
-  btn.setAttribute('data-label', args.label);
-  btn.setAttribute('data-img', args.img ? args.img : '');
-  btn.setAttribute('data-img-alt', args.imgAlt ? args.imgAlt : '');
-  btn.setAttribute('data-icon', args.icon ? args.icon : '');
-  btn.setAttribute('data-icon-order', args.iconOrder ? args.iconOrder : '');
-  btn.setAttribute('data-icon-size', args.iconSize ? args.iconSize : '');
-  btn.setAttribute('data-shape', args.shape);
-  btn.setAttribute('data-aria-label', args.ariaLabel ? args.ariaLabel : '');
+  btn.setAttribute('primary', args.primary);
+  btn.setAttribute('disabled', args.disabled);
+  btn.setAttribute('label', args.label);
+  btn.setAttribute('img', args.img ? args.img : '');
+  btn.setAttribute('img-alt', args.imgAlt ? args.imgAlt : '');
+  btn.setAttribute('icon', args.icon ? args.icon : '');
+  btn.setAttribute('icon-order', args.iconOrder ? args.iconOrder : '');
+  btn.setAttribute('icon-size', args.iconSize ? args.iconSize : '');
+  btn.setAttribute('shape', args.shape);
+  btn.setAttribute('aria-label', args.ariaLabel ? args.ariaLabel : '');
   args.backgroundColor
-    ? btn.setAttribute('data-background-color', args.backgroundColor)
-    : btn.setAttribute('data-background-color', 'primary');
+    ? btn.setAttribute('background-color', args.backgroundColor)
+    : btn.setAttribute('background-color', 'primary');
   if (args.close) {
-    btn.setAttribute('data-close', args.close);
+    btn.setAttribute('close', args.close);
   }
   if (args.hLabel) {
-    btn.setAttribute('data-hidden-label', args.hLabel);
+    btn.setAttribute('hidden-label', args.hLabel);
   }
   if (args.size) {
-    btn.setAttribute('data-size', args.size);
+    btn.setAttribute('size', args.size);
   }
   if (args.id) {
-    btn.setAttribute('data-id', args.id);
+    btn.setAttribute('id', args.id);
   }
   if (args.link) {
-    btn.setAttribute('data-link', args.link);
+    btn.setAttribute('link', args.link);
   }
   if (args.extraClasses) {
-    btn.setAttribute('data-extra-classes', args.extraClasses);
+    btn.setAttribute('extra-classes', args.extraClasses);
   }
   return btn;
 };
diff --git a/src/stories/buttongroup.stories.js b/src/stories/buttongroup.stories.js
index 9ebb7a4d..701e1802 100644
--- a/src/stories/buttongroup.stories.js
+++ b/src/stories/buttongroup.stories.js
@@ -14,79 +14,25 @@ export const Basic = () => html`
       <button type="button" class="btn btn-primary">Middle</button>
       <button type="button" class="btn btn-primary">Right</button>
     </div>
-    <cod-button
-      data-label="Left"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Middle"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Right"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
+    <cod-button label="Left" background-color="primary" primary></cod-button>
+    <cod-button label="Middle" background-color="primary" primary></cod-button>
+    <cod-button label="Right" background-color="primary" primary></cod-button>
   </cod-button-group>
 `;
 
 export const Mixed = () => html`
   <cod-button-group data-type="group" data-label="basic example">
-    <cod-button
-      data-label="Left"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Middle"
-      data-background-color="warning"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Right"
-      data-background-color="danger"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
+    <cod-button label="Left" background-color="primary" primary></cod-button>
+    <cod-button label="Middle" background-color="warning" primary></cod-button>
+    <cod-button label="Right" background-color="danger" primary></cod-button>
   </cod-button-group>
 `;
 
 export const Outlined = () => html`
   <cod-button-group data-type="group" data-label="basic example">
-    <cod-button
-      data-label="Left"
-      data-background-color="primary"
-      data-primary="false"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Middle"
-      data-background-color="primary"
-      data-primary="false"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Right"
-      data-background-color="primary"
-      data-primary="false"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
+    <cod-button label="Left" background-color="primary" primary></cod-button>
+    <cod-button label="Middle" background-color="primary" primary></cod-button>
+    <cod-button label="Right" background-color="primary" primary></cod-button>
   </cod-button-group>
 `;
 
@@ -191,27 +137,9 @@ export const ButtonToolbar = () => html`
       data-label="group 1"
       data-extra-classes="me-2"
     >
-      <cod-button
-        data-label="1"
-        data-background-color="primary"
-        data-primary="false"
-        data-img-alt=""
-        data-icon=""
-      ></cod-button>
-      <cod-button
-        data-label="2"
-        data-background-color="primary"
-        data-primary="false"
-        data-img-alt=""
-        data-icon=""
-      ></cod-button>
-      <cod-button
-        data-label="3"
-        data-background-color="primary"
-        data-primary="false"
-        data-img-alt=""
-        data-icon=""
-      ></cod-button>
+      <cod-button label="1" background-color="primary" primary></cod-button>
+      <cod-button label="2" background-color="primary" primary></cod-button>
+      <cod-button label="3" background-color="primary" primary></cod-button>
     </cod-button-group>
     <cod-form-control
       data-tag="input"
@@ -234,40 +162,10 @@ export const Vertical = () => html`
     data-label="Vertical button group"
     data-vertical="true"
   >
-    <cod-button
-      data-label="Button"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Button"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Button"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Button"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
-    <cod-button
-      data-label="Button"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
-    ></cod-button>
+    <cod-button label="Button" background-color="primary" primary></cod-button>
+    <cod-button label="Button" background-color="primary" primary></cod-button>
+    <cod-button label="Button" background-color="primary" primary></cod-button>
+    <cod-button label="Button" background-color="primary" primary></cod-button>
+    <cod-button label="Button" background-color="primary" primary></cod-button>
   </cod-button-group>
 `;
diff --git a/src/stories/card.stories.js b/src/stories/card.stories.js
index 2b7a7652..df080278 100644
--- a/src/stories/card.stories.js
+++ b/src/stories/card.stories.js
@@ -35,18 +35,12 @@ export const Basic = () => html`
         of the card's content.
       </p>
       <cod-button
-        data-primary="true"
-        data-disable="false"
-        data-label="Link"
-        data-background-color="primary"
-        data-img=""
-        data-img-alt=""
-        data-icon=""
-        data-icon-order=""
-        data-icon-size=""
-        data-shape="fluid"
-        data-aria-label=""
-        data-link="https://detroitmi.gov"
+        primary
+        disabled="false"
+        label="Link"
+        background-color="primary"
+        shape="fluid"
+        link="https://detroitmi.gov"
       ></cod-button>
     </cod-card-body>
   </cod-card>
diff --git a/src/stories/dropdown.stories.js b/src/stories/dropdown.stories.js
index c24d59e1..ca064fcf 100644
--- a/src/stories/dropdown.stories.js
+++ b/src/stories/dropdown.stories.js
@@ -27,14 +27,12 @@ export const Basic = () => html`
       </ul>
     </div>
     <cod-button
-      data-label="Dropdown button"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
+      label="Dropdown button"
+      background-color="primary"
+      primary
       data-bs-toggle="dropdown"
       aria-expanded="false"
-      data-extra-classes="dropdown-toggle"
+      extra-classes="dropdown-toggle"
     ></cod-button>
     <cod-dropdown-menu>
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -47,14 +45,12 @@ export const Basic = () => html`
 export const Variations = () => html`
   <cod-dropdown data-split="false">
     <cod-button
-      data-label="Dropdown button"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
+      label="Dropdown button"
+      background-color="primary"
+      primary
       data-bs-toggle="dropdown"
       aria-expanded="false"
-      data-extra-classes="dropdown-toggle"
+      extra-classes="dropdown-toggle"
     ></cod-button>
     <cod-dropdown-menu>
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -66,14 +62,12 @@ export const Variations = () => html`
   </cod-dropdown>
   <cod-dropdown data-split="false">
     <cod-button
-      data-label="Dropdown button"
-      data-background-color="secondary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
+      label="Dropdown button"
+      background-color="secondary"
+      primary
       data-bs-toggle="dropdown"
       aria-expanded="false"
-      data-extra-classes="dropdown-toggle"
+      extra-classes="dropdown-toggle"
     ></cod-button>
     <cod-dropdown-menu>
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -85,14 +79,12 @@ export const Variations = () => html`
   </cod-dropdown>
   <cod-dropdown data-split="false">
     <cod-button
-      data-label="Dropdown button"
-      data-background-color="success"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
+      label="Dropdown button"
+      background-color="success"
+      primary
       data-bs-toggle="dropdown"
       aria-expanded="false"
-      data-extra-classes="dropdown-toggle"
+      extra-classes="dropdown-toggle"
     ></cod-button>
     <cod-dropdown-menu>
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -104,14 +96,12 @@ export const Variations = () => html`
   </cod-dropdown>
   <cod-dropdown data-split="false">
     <cod-button
-      data-label="Dropdown button"
-      data-background-color="info"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
+      label="Dropdown button"
+      background-color="info"
+      primary
       data-bs-toggle="dropdown"
       aria-expanded="false"
-      data-extra-classes="dropdown-toggle"
+      extra-classes="dropdown-toggle"
     ></cod-button>
     <cod-dropdown-menu>
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -123,14 +113,12 @@ export const Variations = () => html`
   </cod-dropdown>
   <cod-dropdown data-split="false">
     <cod-button
-      data-label="Dropdown button"
-      data-background-color="warning"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
+      label="Dropdown button"
+      background-color="warning"
+      primary
       data-bs-toggle="dropdown"
       aria-expanded="false"
-      data-extra-classes="dropdown-toggle"
+      extra-classes="dropdown-toggle"
     ></cod-button>
     <cod-dropdown-menu>
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -142,14 +130,12 @@ export const Variations = () => html`
   </cod-dropdown>
   <cod-dropdown data-split="false">
     <cod-button
-      data-label="Dropdown button"
-      data-background-color="danger"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
+      label="Dropdown button"
+      background-color="danger"
+      primary
       data-bs-toggle="dropdown"
       aria-expanded="false"
-      data-extra-classes="dropdown-toggle"
+      extra-classes="dropdown-toggle"
     ></cod-button>
     <cod-dropdown-menu>
       <li><a class="dropdown-item" href="#">Action</a></li>
@@ -164,21 +150,16 @@ export const Variations = () => html`
 export const Split = () => html`
   <cod-dropdown data-split="true">
     <cod-button
-      data-label="Dropdown button"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
+      label="Dropdown button"
+      background-color="primary"
+      primary="true"
     ></cod-button>
     <cod-button
-      data-label=""
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
+      background-color="primary"
+      primary
       data-bs-toggle="dropdown"
       aria-expanded="false"
-      data-extra-classes="dropdown-toggle dropdown-toggle-split"
+      extra-classes="dropdown-toggle dropdown-toggle-split"
     >
       <span class="visually-hidden">Toggle Dropdown</span>
     </cod-button>
@@ -195,14 +176,12 @@ export const Split = () => html`
 export const DarkMode = () => html`
   <cod-dropdown data-split="false">
     <cod-button
-      data-label="Dropdown button"
-      data-background-color="primary"
-      data-primary="true"
-      data-img-alt=""
-      data-icon=""
+      label="Dropdown button"
+      background-color="primary"
+      primary
       data-bs-toggle="dropdown"
       aria-expanded="false"
-      data-extra-classes="dropdown-toggle"
+      extra-classes="dropdown-toggle"
     ></cod-button>
     <cod-dropdown-menu data-dark-mode="true">
       <li><a class="dropdown-item" href="#">Action</a></li>
diff --git a/src/stories/form.stories.js b/src/stories/form.stories.js
index b027fbfd..8a26d0e6 100644
--- a/src/stories/form.stories.js
+++ b/src/stories/form.stories.js
@@ -61,7 +61,7 @@ Form.args = {
   </cod-form-check-group>
   <cod-form-check data-type="checkbox" data-label="Accept legal stuff" data-required="true"
     data-valueMissing="Please sign off your rights to proceed lol"></cod-form-check>
-  <cod-button data-label="submit" data-background-color="color-1" data-primary="true" data-img-alt="" data-icon=""></cod-button>
+  <cod-button label="submit" background-color="color-1" primary></cod-button>
   `,
   submit: (e) => {
     e.preventDefault();
diff --git a/src/stories/nav.stories.js b/src/stories/nav.stories.js
index 8b8b81ab..9c25d60d 100644
--- a/src/stories/nav.stories.js
+++ b/src/stories/nav.stories.js
@@ -111,13 +111,11 @@ export const TabsDropdowns = () => html`
     <a class="nav-link active" aria-current="page" href="#">Active</a>
     <cod-dropdown data-split="false">
       <cod-button
-        data-label="Dropdown"
-        data-primary="true"
-        data-img-alt=""
-        data-icon=""
+        label="Dropdown"
+        primary
         data-bs-toggle="dropdown"
         aria-expanded="false"
-        data-extra-classes="dropdown-toggle"
+        extra-classes="dropdown-toggle"
       ></cod-button>
       <cod-dropdown-menu>
         <li><a class="dropdown-item" href="#">Action</a></li>
@@ -137,13 +135,11 @@ export const PillssDropdowns = () => html`
     <a class="nav-link active" aria-current="page" href="#">Active</a>
     <cod-dropdown data-split="false">
       <cod-button
-        data-label="Dropdown"
-        data-primary="true"
-        data-img-alt=""
-        data-icon=""
+        label="Dropdown"
+        primary
         data-bs-toggle="dropdown"
         aria-expanded="false"
-        data-extra-classes="dropdown-toggle"
+        extra-classes="dropdown-toggle"
       ></cod-button>
       <cod-dropdown-menu>
         <li><a class="dropdown-item" href="#">Action</a></li>
diff --git a/src/stories/navbar.stories.js b/src/stories/navbar.stories.js
index 83d58148..af976d95 100644
--- a/src/stories/navbar.stories.js
+++ b/src/stories/navbar.stories.js
@@ -79,13 +79,11 @@ export const Basic = () => html`
         <a class="nav-link" href="#">Link</a>
         <cod-dropdown data-split="false">
           <cod-button
-            data-label="Dropdown"
-            data-primary="true"
-            data-img-alt=""
-            data-icon=""
+            label="Dropdown"
+            primary
             data-bs-toggle="dropdown"
             aria-expanded="false"
-            data-extra-classes="dropdown-toggle text-primary"
+            extra-classes="dropdown-toggle text-primary"
           ></cod-button>
           <cod-dropdown-menu>
             <li><a class="dropdown-item" href="#">Link</a></li>
@@ -117,13 +115,11 @@ export const Brand = () => html`
         <a class="nav-link" href="#">Link</a>
         <cod-dropdown data-split="false">
           <cod-button
-            data-label="Dropdown"
-            data-primary="true"
-            data-img-alt=""
-            data-icon=""
+            label="Dropdown"
+            primary
             data-bs-toggle="dropdown"
             aria-expanded="false"
-            data-extra-classes="dropdown-toggle text-primary"
+            extra-classes="dropdown-toggle text-primary"
           ></cod-button>
           <cod-dropdown-menu>
             <li><a class="dropdown-item" href="#">Link</a></li>
@@ -157,13 +153,11 @@ export const Brand = () => html`
         <a class="nav-link" href="#">Link</a>
         <cod-dropdown data-split="false">
           <cod-button
-            data-label="Dropdown"
-            data-primary="true"
-            data-img-alt=""
-            data-icon=""
+            label="Dropdown"
+            primary
             data-bs-toggle="dropdown"
             aria-expanded="false"
-            data-extra-classes="dropdown-toggle text-primary"
+            extra-classes="dropdown-toggle text-primary"
           ></cod-button>
           <cod-dropdown-menu>
             <li><a class="dropdown-item" href="#">Link</a></li>
@@ -198,13 +192,11 @@ export const Brand = () => html`
         <a class="nav-link" href="#">Link</a>
         <cod-dropdown data-split="false">
           <cod-button
-            data-label="Dropdown"
-            data-primary="true"
-            data-img-alt=""
-            data-icon=""
+            label="Dropdown"
+            primary
             data-bs-toggle="dropdown"
             aria-expanded="false"
-            data-extra-classes="dropdown-toggle text-primary"
+            extra-classes="dropdown-toggle text-primary"
           ></cod-button>
           <cod-dropdown-menu>
             <li><a class="dropdown-item" href="#">Link</a></li>
@@ -240,13 +232,11 @@ export const Brand = () => html`
         <a class="nav-link" href="#">Link</a>
         <cod-dropdown data-split="false">
           <cod-button
-            data-label="Dropdown"
-            data-primary="true"
-            data-img-alt=""
-            data-icon=""
+            label="Dropdown"
+            primary
             data-bs-toggle="dropdown"
             aria-expanded="false"
-            data-extra-classes="dropdown-toggle text-primary"
+            extra-classes="dropdown-toggle text-primary"
           ></cod-button>
           <cod-dropdown-menu>
             <li><a class="dropdown-item" href="#">Link</a></li>
@@ -454,13 +444,13 @@ export const Offcanvas = () => html`
           <a class="nav-link" href="#">Link</a>
           <cod-dropdown data-split="false">
             <cod-button
-              data-label="Dropdown"
-              data-primary="true"
-              data-img-alt=""
-              data-icon=""
+              label="Dropdown"
+              primary
+              img-alt=""
+              icon=""
               data-bs-toggle="dropdown"
               aria-expanded="false"
-              data-extra-classes="dropdown-toggle text-primary"
+              extra-classes="dropdown-toggle text-primary"
             ></cod-button>
             <cod-dropdown-menu>
               <li><a class="dropdown-item" href="#">Link</a></li>
@@ -524,13 +514,11 @@ export const OffcanvasResponsive = () => html`
           <a class="nav-link text-light" href="#">Link</a>
           <cod-dropdown data-split="false">
             <cod-button
-              data-label="Dropdown"
-              data-primary="true"
-              data-img-alt=""
-              data-icon=""
+              label="Dropdown"
+              primary
               data-bs-toggle="dropdown"
               aria-expanded="false"
-              data-extra-classes="dropdown-toggle text-light"
+              extra-classes="dropdown-toggle text-light"
             ></cod-button>
             <cod-dropdown-menu>
               <li><a class="dropdown-item" href="#">Link</a></li>
@@ -577,13 +565,11 @@ export const OffcanvasColor = () => html`
           <a class="nav-link text-light" href="#">Link</a>
           <cod-dropdown data-split="false">
             <cod-button
-              data-label="Dropdown"
-              data-primary="true"
-              data-img-alt=""
-              data-icon=""
+              label="Dropdown"
+              primary
               data-bs-toggle="dropdown"
               aria-expanded="false"
-              data-extra-classes="dropdown-toggle text-light"
+              extra-classes="dropdown-toggle text-light"
             ></cod-button>
             <cod-dropdown-menu>
               <li><a class="dropdown-item" href="#">Link</a></li>