@patternfly/patternfly 6.1.0-prerelease.1 → 6.1.0-prerelease.3

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -396,123 +396,180 @@ cssPrefix: pf-v6-c-menu-toggle
 
 ```
 
-### Split toggle with checkbox
+### With icon/image and text
 
 ```html
-<div
-  class="pf-v6-c-menu-toggle pf-m-split-button"
-  id="split-button-checkbox-example"
+<button
+  class="pf-v6-c-menu-toggle pf-m-secondary"
+  type="button"
+  aria-expanded="false"
 >
-  <label class="pf-v6-c-check pf-m-standalone">
-    <input
-      class="pf-v6-c-check__input"
-      type="checkbox"
-      id="split-button-checkbox-example-input"
-      name="split-button-checkbox-example-input"
-      aria-label="Select all items"
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-cog" aria-hidden="true"></i>
+  </span>
+  <span class="pf-v6-c-menu-toggle__text">Icon</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
+
+&nbsp;
+<button
+  class="pf-v6-c-menu-toggle pf-m-secondary pf-m-disabled"
+  type="button"
+  aria-expanded="false"
+  disabled
+>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-cog" aria-hidden="true"></i>
+  </span>
+  <span class="pf-v6-c-menu-toggle__text">Icon</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
+
+```
+
+### With avatar and text
+
+```html
+<button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false">
+  <span class="pf-v6-c-menu-toggle__icon pf-m-avatar">
+    <img
+      class="pf-v6-c-avatar pf-m-sm"
+      alt="Avatar image"
+      src="/assets/images/img_avatar-light.svg"
     />
-  </label>
-  <button
-    class="pf-v6-c-menu-toggle__button"
-    type="button"
-    aria-expanded="false"
-    id="split-button-checkbox-example-toggle-button"
-    aria-label="Menu toggle"
-  >
-    <span class="pf-v6-c-menu-toggle__controls">
-      <span class="pf-v6-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
-      </span>
+  </span>
+  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
     </span>
-  </button>
-</div>
+  </span>
+</button>
+
 &nbsp;
-<div
-  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
-  id="split-button-checkbox-expanded-example"
+<button
+  class="pf-v6-c-menu-toggle pf-m-expanded"
+  type="button"
+  aria-expanded="true"
 >
-  <label class="pf-v6-c-check pf-m-standalone">
-    <input
-      class="pf-v6-c-check__input"
-      type="checkbox"
-      id="split-button-checkbox-expanded-example-input"
-      name="split-button-checkbox-expanded-example-input"
-      aria-label="Select all items"
+  <span class="pf-v6-c-menu-toggle__icon pf-m-avatar">
+    <img
+      class="pf-v6-c-avatar pf-m-sm"
+      alt="Avatar image"
+      src="/assets/images/img_avatar-light.svg"
     />
-  </label>
-  <button
-    class="pf-v6-c-menu-toggle__button"
-    type="button"
-    aria-expanded="true"
-    id="split-button-checkbox-expanded-example-toggle-button"
-    aria-label="Menu toggle"
-  >
-    <span class="pf-v6-c-menu-toggle__controls">
-      <span class="pf-v6-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
-      </span>
+  </span>
+  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
     </span>
-  </button>
-</div>
+  </span>
+</button>
+
 &nbsp;
-<div
-  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
-  id="split-button-checkbox-disabled-example"
+<button
+  class="pf-v6-c-menu-toggle pf-m-disabled"
+  type="button"
+  aria-expanded="false"
+  disabled
 >
-  <label class="pf-v6-c-check pf-m-standalone">
-    <input
-      class="pf-v6-c-check__input"
-      type="checkbox"
-      disabled
-      id="split-button-checkbox-disabled-example-input"
-      name="split-button-checkbox-disabled-example-input"
-      aria-label="Select all items"
+  <span class="pf-v6-c-menu-toggle__icon pf-m-avatar">
+    <img
+      class="pf-v6-c-avatar pf-m-sm"
+      alt="Avatar image"
+      src="/assets/images/img_avatar-light.svg"
     />
-  </label>
-  <button
-    class="pf-v6-c-menu-toggle__button"
-    type="button"
-    aria-expanded="false"
-    id="split-button-checkbox-disabled-example-toggle-button"
-    aria-label="Menu toggle"
-    disabled
-  >
-    <span class="pf-v6-c-menu-toggle__controls">
-      <span class="pf-v6-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
-      </span>
+  </span>
+  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
     </span>
-  </button>
-</div>
+  </span>
+</button>
 
 ```
 
-### Split toggle with labeled checkbox
+### Full height
+
+```html
+<button
+  class="pf-v6-c-menu-toggle pf-m-full-height"
+  type="button"
+  aria-expanded="false"
+>
+  <span class="pf-v6-c-menu-toggle__text">Full height</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
+
+```
+
+### Full width
+
+```html
+<button
+  class="pf-v6-c-menu-toggle pf-m-full-width"
+  type="button"
+  aria-expanded="false"
+>
+  <span class="pf-v6-c-menu-toggle__text">Full width</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
 
-To add a label to a split toggle that will be linked to the checkbox, pass the text wrapped in `span.pf-v6-c-check__label` as a child to `label.pf-v6-c-check`. Clicking the text will update the checked state of the split toggle's checkbox.
+```
+
+### Typeahead
 
 ```html
 <div
-  class="pf-v6-c-menu-toggle pf-m-split-button"
-  id="split-button-checkbox-with-toggle-text-example"
+  class="pf-v6-c-menu-toggle pf-m-typeahead pf-m-full-width"
+  id="typeahead-example"
 >
-  <label
-    class="pf-v6-c-check"
-    for="split-button-checkbox-with-toggle-text-example-input"
-  >
-    <input
-      class="pf-v6-c-check__input"
-      type="checkbox"
-      id="split-button-checkbox-with-toggle-text-example-input"
-      name="split-button-checkbox-with-toggle-text-example-input"
-    />
-    <span class="pf-v6-c-check__label">Select all items</span>
-  </label>
+  <div class="pf-v6-c-text-input-group pf-m-plain">
+    <div class="pf-v6-c-text-input-group__main">
+      <span class="pf-v6-c-text-input-group__text">
+        <input
+          class="pf-v6-c-text-input-group__text-input"
+          type="text"
+          value
+          aria-label="Type to filter"
+        />
+      </span>
+    </div>
+    <div class="pf-v6-c-text-input-group__utilities">
+      <button
+        class="pf-v6-c-button pf-m-plain"
+        type="button"
+        aria-label="Clear input"
+      >
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-times fa-fw" aria-hidden="true"></i>
+        </span>
+      </button>
+    </div>
+  </div>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="false"
-    id="split-button-checkbox-with-toggle-text-example-toggle-button"
+    id="typeahead-example-toggle-button"
     aria-label="Menu toggle"
   >
     <span class="pf-v6-c-menu-toggle__controls">
@@ -522,157 +579,144 @@ To add a label to a split toggle that will be linked to the checkbox, pass the t
     </span>
   </button>
 </div>
-&nbsp;
-<div
-  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
-  id="split-button-checkbox-with-toggle-text-expanded-example"
+
+```
+
+### Status
+
+```html
+<button
+  class="pf-v6-c-menu-toggle pf-m-success"
+  type="button"
+  aria-expanded="false"
 >
-  <label
-    class="pf-v6-c-check"
-    for="split-button-checkbox-with-toggle-text-expanded-example-input"
-  >
-    <input
-      class="pf-v6-c-check__input"
-      type="checkbox"
-      id="split-button-checkbox-with-toggle-text-expanded-example-input"
-      name="split-button-checkbox-with-toggle-text-expanded-example-input"
-    />
-    <span class="pf-v6-c-check__label">Select all items</span>
-  </label>
-  <button
-    class="pf-v6-c-menu-toggle__button"
-    type="button"
-    aria-expanded="true"
-    id="split-button-checkbox-with-toggle-text-expanded-example-toggle-button"
-    aria-label="Menu toggle"
-  >
-    <span class="pf-v6-c-menu-toggle__controls">
-      <span class="pf-v6-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
-      </span>
+  <span class="pf-v6-c-menu-toggle__text">Success</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__status-icon">
+      <i class="fas fa-check-circle" aria-hidden="true"></i>
     </span>
-  </button>
-</div>
-&nbsp;
-<div
-  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
-  id="split-button-checkbox-with-toggle-text-disabled-example"
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
+
+<br />
+<br />
+
+<button
+  class="pf-v6-c-menu-toggle pf-m-warning"
+  type="button"
+  aria-expanded="false"
 >
-  <label
-    class="pf-v6-c-check"
-    for="split-button-checkbox-with-toggle-text-disabled-example-input"
-  >
-    <input
-      class="pf-v6-c-check__input"
-      type="checkbox"
-      disabled
-      id="split-button-checkbox-with-toggle-text-disabled-example-input"
-      name="split-button-checkbox-with-toggle-text-disabled-example-input"
-    />
-    <span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
-  </label>
-  <button
-    class="pf-v6-c-menu-toggle__button"
-    type="button"
-    aria-expanded="false"
-    id="split-button-checkbox-with-toggle-text-disabled-example-toggle-button"
-    aria-label="Menu toggle"
-    disabled
-  >
-    <span class="pf-v6-c-menu-toggle__controls">
-      <span class="pf-v6-c-menu-toggle__toggle-icon">
-        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
-      </span>
+  <span class="pf-v6-c-menu-toggle__text">Warning</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__status-icon">
+      <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
     </span>
-  </button>
-</div>
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
+
+<br />
+<br />
+
+<button
+  class="pf-v6-c-menu-toggle pf-m-danger"
+  type="button"
+  aria-expanded="false"
+>
+  <span class="pf-v6-c-menu-toggle__text">Danger</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__status-icon">
+      <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+    </span>
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
 
 ```
 
-### Split toggle with checkbox and toggle text
+### Placeholder
+
+```html
+<button
+  class="pf-v6-c-menu-toggle pf-m-placeholder"
+  type="button"
+  aria-expanded="false"
+>
+  <span class="pf-v6-c-menu-toggle__text">Placeholder text</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
+
+```
+
+### Split toggle
 
-To add a label to a split toggle that will be linked to the toggle button, pass the text wrapped in `span.pf-v6-c-menu-toggle__text` as a child to `button.pf-v6-c-menu-toggle__button.pf-m-text`. Clicking the text should trigger any click action on the toggle.
+Shown with default, primary, and secondary styling
 
 ```html
 <div
   class="pf-v6-c-menu-toggle pf-m-split-button"
-  id="split-button-checkbox-with-toggle-button-text-example"
+  id="split-button-checkbox-with-toggle-action-example"
 >
-  <label class="pf-v6-c-check pf-m-standalone">
-    <input
-      class="pf-v6-c-check__input"
-      type="checkbox"
-      id="split-button-checkbox-with-toggle-button-text-example-input"
-      name="split-button-checkbox-with-toggle-button-text-example-input"
-      aria-label="Select all items"
-    />
-  </label>
+  <button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
   <button
-    class="pf-v6-c-menu-toggle__button pf-m-text"
+    class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="false"
-    id="split-button-checkbox-with-toggle-button-text-example-toggle-button"
+    id="split-button-checkbox-with-toggle-action-example-toggle-button"
     aria-label="Menu toggle"
   >
-    <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
     <span class="pf-v6-c-menu-toggle__controls">
       <span class="pf-v6-c-menu-toggle__toggle-icon">
         <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
       </span>
     </span>
   </button>
-</div>&nbsp;
+</div>
+&nbsp;
 <div
   class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
-  id="split-button-checkbox-with-toggle-button-text-expanded-example"
+  id="split-button-checkbox-with-toggle-action-expanded-example"
 >
-  <label class="pf-v6-c-check pf-m-standalone">
-    <input
-      class="pf-v6-c-check__input"
-      type="checkbox"
-      id="split-button-checkbox-with-toggle-button-text-expanded-example-input"
-      name="split-button-checkbox-with-toggle-button-text-expanded-example-input"
-      aria-label="Select all items"
-    />
-  </label>
+  <button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
   <button
-    class="pf-v6-c-menu-toggle__button pf-m-text"
+    class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="true"
-    id="split-button-checkbox-with-toggle-button-text-expanded-example-toggle-button"
+    id="split-button-checkbox-with-toggle-action-expanded-example-toggle-button"
     aria-label="Menu toggle"
   >
-    <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
     <span class="pf-v6-c-menu-toggle__controls">
       <span class="pf-v6-c-menu-toggle__toggle-icon">
         <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
       </span>
     </span>
   </button>
-</div>&nbsp;
+</div>
+&nbsp;
 <div
   class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
-  id="split-button-checkbox-with-toggle-button-text-disabled-example"
+  id="split-button-checkbox-with-toggle-action-disabled-example"
 >
-  <label class="pf-v6-c-check pf-m-standalone">
-    <input
-      class="pf-v6-c-check__input"
-      type="checkbox"
-      disabled
-      id="split-button-checkbox-with-toggle-button-text-disabled-example-input"
-      name="split-button-checkbox-with-toggle-button-text-disabled-example-input"
-      aria-label="Select all items"
-    />
-  </label>
+  <button class="pf-v6-c-menu-toggle__button" type="button" disabled>Action</button>
   <button
-    class="pf-v6-c-menu-toggle__button pf-m-text"
+    class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="false"
-    id="split-button-checkbox-with-toggle-button-text-disabled-example-toggle-button"
+    id="split-button-checkbox-with-toggle-action-disabled-example-toggle-button"
     aria-label="Menu toggle"
     disabled
   >
-    <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
     <span class="pf-v6-c-menu-toggle__controls">
       <span class="pf-v6-c-menu-toggle__toggle-icon">
         <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
@@ -681,32 +725,19 @@ To add a label to a split toggle that will be linked to the toggle button, pass
   </button>
 </div>
 
-```
-
-### Split button, primary
+<br />
+<br />
 
-```html
 <div
   class="pf-v6-c-menu-toggle pf-m-split-button pf-m-primary"
-  id="split-button-checkbox-primary-example"
+  id="split-button-checkbox-with-toggle-action-primary-example"
 >
-  <label
-    class="pf-v6-c-check"
-    for="split-button-checkbox-primary-example-input"
-  >
-    <input
-      class="pf-v6-c-check__input"
-      type="checkbox"
-      id="split-button-checkbox-primary-example-input"
-      name="split-button-checkbox-primary-example-input"
-    />
-    <span class="pf-v6-c-check__label">Select all items</span>
-  </label>
+  <button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="false"
-    id="split-button-checkbox-primary-example-toggle-button"
+    id="split-button-checkbox-with-toggle-action-primary-example-toggle-button"
     aria-label="Menu toggle"
   >
     <span class="pf-v6-c-menu-toggle__controls">
@@ -719,25 +750,14 @@ To add a label to a split toggle that will be linked to the toggle button, pass
 &nbsp;
 <div
   class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary"
-  id="split-button-checkbox-primary-expanded-example"
+  id="split-button-checkbox-with-toggle-action-primary-expanded-example"
 >
-  <label
-    class="pf-v6-c-check"
-    for="split-button-checkbox-primary-expanded-example-input"
-  >
-    <input
-      class="pf-v6-c-check__input"
-      type="checkbox"
-      id="split-button-checkbox-primary-expanded-example-input"
-      name="split-button-checkbox-primary-expanded-example-input"
-    />
-    <span class="pf-v6-c-check__label">Select all items</span>
-  </label>
+  <button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="true"
-    id="split-button-checkbox-primary-expanded-example-toggle-button"
+    id="split-button-checkbox-with-toggle-action-primary-expanded-example-toggle-button"
     aria-label="Menu toggle"
   >
     <span class="pf-v6-c-menu-toggle__controls">
@@ -750,26 +770,14 @@ To add a label to a split toggle that will be linked to the toggle button, pass
 &nbsp;
 <div
   class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary"
-  id="split-button-checkbox-primary-disabled-example"
+  id="split-button-checkbox-with-toggle-action-primary-disabled-example"
 >
-  <label
-    class="pf-v6-c-check"
-    for="split-button-checkbox-primary-disabled-example-input"
-  >
-    <input
-      class="pf-v6-c-check__input"
-      type="checkbox"
-      disabled
-      id="split-button-checkbox-primary-disabled-example-input"
-      name="split-button-checkbox-primary-disabled-example-input"
-    />
-    <span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
-  </label>
+  <button class="pf-v6-c-menu-toggle__button" type="button" disabled>Action</button>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="false"
-    id="split-button-checkbox-primary-disabled-example-toggle-button"
+    id="split-button-checkbox-with-toggle-action-primary-disabled-example-toggle-button"
     aria-label="Menu toggle"
     disabled
   >
@@ -781,32 +789,19 @@ To add a label to a split toggle that will be linked to the toggle button, pass
   </button>
 </div>
 
-```
-
-### Split button, secondary
+<br />
+<br />
 
-```html
 <div
   class="pf-v6-c-menu-toggle pf-m-split-button pf-m-secondary"
-  id="split-button-checkbox-secondary-example"
+  id="split-button-checkbox-with-toggle-action-secondary-example"
 >
-  <label
-    class="pf-v6-c-check"
-    for="split-button-checkbox-secondary-example-input"
-  >
-    <input
-      class="pf-v6-c-check__input"
-      type="checkbox"
-      id="split-button-checkbox-secondary-example-input"
-      name="split-button-checkbox-secondary-example-input"
-    />
-    <span class="pf-v6-c-check__label">Select all items</span>
-  </label>
+  <button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="false"
-    id="split-button-checkbox-secondary-example-toggle-button"
+    id="split-button-checkbox-with-toggle-action-secondary-example-toggle-button"
     aria-label="Menu toggle"
   >
     <span class="pf-v6-c-menu-toggle__controls">
@@ -819,25 +814,70 @@ To add a label to a split toggle that will be linked to the toggle button, pass
 &nbsp;
 <div
   class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary"
-  id="split-button-checkbox-secondary-expanded-example"
+  id="split-button-checkbox-with-toggle-action-secondary-expanded-example"
 >
-  <label
-    class="pf-v6-c-check"
-    for="split-button-checkbox-secondary-expanded-example-input"
+  <button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
+  <button
+    class="pf-v6-c-menu-toggle__button"
+    type="button"
+    aria-expanded="true"
+    id="split-button-checkbox-with-toggle-action-secondary-expanded-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>
+&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
+  id="split-button-checkbox-with-toggle-action-secondary-disabled-example"
+>
+  <button class="pf-v6-c-menu-toggle__button" type="button" disabled>Action</button>
+  <button
+    class="pf-v6-c-menu-toggle__button"
+    type="button"
+    aria-expanded="false"
+    id="split-button-checkbox-with-toggle-action-secondary-disabled-example-toggle-button"
+    aria-label="Menu toggle"
+    disabled
   >
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>
+
+```
+
+### Split toggle with checkbox
+
+Shown with default, primary, and secondary styling
+
+```html
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button"
+  id="split-button-checkbox-example"
+>
+  <label class="pf-v6-c-check pf-m-standalone">
     <input
       class="pf-v6-c-check__input"
       type="checkbox"
-      id="split-button-checkbox-secondary-expanded-example-input"
-      name="split-button-checkbox-secondary-expanded-example-input"
+      id="split-button-checkbox-example-input"
+      name="split-button-checkbox-example-input"
+      aria-label="Select all items"
     />
-    <span class="pf-v6-c-check__label">Select all items</span>
   </label>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
-    aria-expanded="true"
-    id="split-button-checkbox-secondary-expanded-example-toggle-button"
+    aria-expanded="false"
+    id="split-button-checkbox-example-toggle-button"
     aria-label="Menu toggle"
   >
     <span class="pf-v6-c-menu-toggle__controls">
@@ -849,27 +889,52 @@ To add a label to a split toggle that will be linked to the toggle button, pass
 </div>
 &nbsp;
 <div
-  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
-  id="split-button-checkbox-secondary-disabled-example"
+  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
+  id="split-button-checkbox-expanded-example"
 >
-  <label
-    class="pf-v6-c-check"
-    for="split-button-checkbox-secondary-disabled-example-input"
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-checkbox-expanded-example-input"
+      name="split-button-checkbox-expanded-example-input"
+      aria-label="Select all items"
+    />
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button"
+    type="button"
+    aria-expanded="true"
+    id="split-button-checkbox-expanded-example-toggle-button"
+    aria-label="Menu toggle"
   >
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>
+&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
+  id="split-button-checkbox-disabled-example"
+>
+  <label class="pf-v6-c-check pf-m-standalone">
     <input
       class="pf-v6-c-check__input"
       type="checkbox"
       disabled
-      id="split-button-checkbox-secondary-disabled-example-input"
-      name="split-button-checkbox-secondary-disabled-example-input"
+      id="split-button-checkbox-disabled-example-input"
+      name="split-button-checkbox-disabled-example-input"
+      aria-label="Select all items"
     />
-    <span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
   </label>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="false"
-    id="split-button-checkbox-secondary-disabled-example-toggle-button"
+    id="split-button-checkbox-disabled-example-toggle-button"
     aria-label="Menu toggle"
     disabled
   >
@@ -881,21 +946,27 @@ To add a label to a split toggle that will be linked to the toggle button, pass
   </button>
 </div>
 
-```
-
-### Split button (action)
+<br />
+<br />
 
-```html
 <div
-  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-action"
-  id="split-button-checkbox-with-toggle-action-example"
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-primary"
+  id="split-button-primary-checkbox-example"
 >
-  <button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-primary-checkbox-example-input"
+      name="split-button-primary-checkbox-example-input"
+      aria-label="Select all items"
+    />
+  </label>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="false"
-    id="split-button-checkbox-with-toggle-action-example-toggle-button"
+    id="split-button-primary-checkbox-example-toggle-button"
     aria-label="Menu toggle"
   >
     <span class="pf-v6-c-menu-toggle__controls">
@@ -907,15 +978,23 @@ To add a label to a split toggle that will be linked to the toggle button, pass
 </div>
 &nbsp;
 <div
-  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action"
-  id="split-button-checkbox-with-toggle-action-expanded-example"
+  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary"
+  id="split-button--primary-checkbox-expanded-example"
 >
-  <button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button--primary-checkbox-expanded-example-input"
+      name="split-button--primary-checkbox-expanded-example-input"
+      aria-label="Select all items"
+    />
+  </label>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="true"
-    id="split-button-checkbox-with-toggle-action-expanded-example-toggle-button"
+    id="split-button--primary-checkbox-expanded-example-toggle-button"
     aria-label="Menu toggle"
   >
     <span class="pf-v6-c-menu-toggle__controls">
@@ -927,15 +1006,24 @@ To add a label to a split toggle that will be linked to the toggle button, pass
 </div>
 &nbsp;
 <div
-  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled"
-  id="split-button-checkbox-with-toggle-action-disabled-example"
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary"
+  id="split-button--primary-checkbox-disabled-example"
 >
-  <button class="pf-v6-c-menu-toggle__button" type="button" disabled>Action</button>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      disabled
+      id="split-button--primary-checkbox-disabled-example-input"
+      name="split-button--primary-checkbox-disabled-example-input"
+      aria-label="Select all items"
+    />
+  </label>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="false"
-    id="split-button-checkbox-with-toggle-action-disabled-example-toggle-button"
+    id="split-button--primary-checkbox-disabled-example-toggle-button"
     aria-label="Menu toggle"
     disabled
   >
@@ -947,21 +1035,27 @@ To add a label to a split toggle that will be linked to the toggle button, pass
   </button>
 </div>
 
-```
-
-### Split button, primary (action)
+<br />
+<br />
 
-```html
 <div
-  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-action pf-m-primary"
-  id="split-button-checkbox-with-toggle-action-primary-example"
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-secondary"
+  id="split-button-secondary-checkbox-example"
 >
-  <button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-secondary-checkbox-example-input"
+      name="split-button-secondary-checkbox-example-input"
+      aria-label="Select all items"
+    />
+  </label>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="false"
-    id="split-button-checkbox-with-toggle-action-primary-example-toggle-button"
+    id="split-button-secondary-checkbox-example-toggle-button"
     aria-label="Menu toggle"
   >
     <span class="pf-v6-c-menu-toggle__controls">
@@ -973,15 +1067,23 @@ To add a label to a split toggle that will be linked to the toggle button, pass
 </div>
 &nbsp;
 <div
-  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action pf-m-primary"
-  id="split-button-checkbox-with-toggle-action-primary-expanded-example"
+  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary"
+  id="split-button-secondary-checkbox-expanded-example"
 >
-  <button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-secondary-checkbox-expanded-example-input"
+      name="split-button-secondary-checkbox-expanded-example-input"
+      aria-label="Select all items"
+    />
+  </label>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="true"
-    id="split-button-checkbox-with-toggle-action-primary-expanded-example-toggle-button"
+    id="split-button-secondary-checkbox-expanded-example-toggle-button"
     aria-label="Menu toggle"
   >
     <span class="pf-v6-c-menu-toggle__controls">
@@ -993,15 +1095,24 @@ To add a label to a split toggle that will be linked to the toggle button, pass
 </div>
 &nbsp;
 <div
-  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-primary"
-  id="split-button-checkbox-with-toggle-action-primary-disabled-example"
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
+  id="split-button-secondary-checkbox-disabled-example"
 >
-  <button class="pf-v6-c-menu-toggle__button" type="button" disabled>Action</button>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      disabled
+      id="split-button-secondary-checkbox-disabled-example-input"
+      name="split-button-secondary-checkbox-disabled-example-input"
+      aria-label="Select all items"
+    />
+  </label>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="false"
-    id="split-button-checkbox-with-toggle-action-primary-disabled-example-toggle-button"
+    id="split-button-secondary-checkbox-disabled-example-toggle-button"
     aria-label="Menu toggle"
     disabled
   >
@@ -1015,19 +1126,33 @@ To add a label to a split toggle that will be linked to the toggle button, pass
 
 ```
 
-### Split button, secondary (action)
+### Split toggle with labeled checkbox
+
+To add a label to a split toggle that will be linked to the checkbox, pass the text wrapped in `span.pf-v6-c-check__label` as a child to `label.pf-v6-c-check`. Clicking the text will update the checked state of the split toggle's checkbox. <br/> <br/>
+Shown with default, primary, and secondary styling
 
 ```html
 <div
-  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-action pf-m-secondary"
-  id="split-button-checkbox-with-toggle-action-secondary-example"
+  class="pf-v6-c-menu-toggle pf-m-split-button"
+  id="split-button-checkbox-with-toggle-text-example"
 >
-  <button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
+  <label
+    class="pf-v6-c-check"
+    for="split-button-checkbox-with-toggle-text-example-input"
+  >
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-checkbox-with-toggle-text-example-input"
+      name="split-button-checkbox-with-toggle-text-example-input"
+    />
+    <span class="pf-v6-c-check__label">Select all items</span>
+  </label>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="false"
-    id="split-button-checkbox-with-toggle-action-secondary-example-toggle-button"
+    id="split-button-checkbox-with-toggle-text-example-toggle-button"
     aria-label="Menu toggle"
   >
     <span class="pf-v6-c-menu-toggle__controls">
@@ -1039,15 +1164,26 @@ To add a label to a split toggle that will be linked to the toggle button, pass
 </div>
 &nbsp;
 <div
-  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action pf-m-secondary"
-  id="split-button-checkbox-with-toggle-action-secondary-expanded-example"
+  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
+  id="split-button-checkbox-with-toggle-text-expanded-example"
 >
-  <button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
+  <label
+    class="pf-v6-c-check"
+    for="split-button-checkbox-with-toggle-text-expanded-example-input"
+  >
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-checkbox-with-toggle-text-expanded-example-input"
+      name="split-button-checkbox-with-toggle-text-expanded-example-input"
+    />
+    <span class="pf-v6-c-check__label">Select all items</span>
+  </label>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="true"
-    id="split-button-checkbox-with-toggle-action-secondary-expanded-example-toggle-button"
+    id="split-button-checkbox-with-toggle-text-expanded-example-toggle-button"
     aria-label="Menu toggle"
   >
     <span class="pf-v6-c-menu-toggle__controls">
@@ -1059,15 +1195,27 @@ To add a label to a split toggle that will be linked to the toggle button, pass
 </div>
 &nbsp;
 <div
-  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-secondary"
-  id="split-button-checkbox-with-toggle-action-secondary-disabled-example"
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
+  id="split-button-checkbox-with-toggle-text-disabled-example"
 >
-  <button class="pf-v6-c-menu-toggle__button" type="button" disabled>Action</button>
+  <label
+    class="pf-v6-c-check"
+    for="split-button-checkbox-with-toggle-text-disabled-example-input"
+  >
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      disabled
+      id="split-button-checkbox-with-toggle-text-disabled-example-input"
+      name="split-button-checkbox-with-toggle-text-disabled-example-input"
+    />
+    <span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
+  </label>
   <button
     class="pf-v6-c-menu-toggle__button"
     type="button"
     aria-expanded="false"
-    id="split-button-checkbox-with-toggle-action-secondary-disabled-example-toggle-button"
+    id="split-button-checkbox-with-toggle-text-disabled-example-toggle-button"
     aria-label="Menu toggle"
     disabled
   >
@@ -1079,268 +1227,778 @@ To add a label to a split toggle that will be linked to the toggle button, pass
   </button>
 </div>
 
-```
-
-### With icon/image and text
+<br />
+<br />
 
-```html
-<button
-  class="pf-v6-c-menu-toggle pf-m-secondary"
-  type="button"
-  aria-expanded="false"
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-primary"
+  id="split-button-checkbox-primary-example"
 >
-  <span class="pf-v6-c-menu-toggle__icon">
-    <i class="fas fa-cog" aria-hidden="true"></i>
-  </span>
-  <span class="pf-v6-c-menu-toggle__text">Icon</span>
-  <span class="pf-v6-c-menu-toggle__controls">
-    <span class="pf-v6-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+  <label
+    class="pf-v6-c-check"
+    for="split-button-checkbox-primary-example-input"
+  >
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-checkbox-primary-example-input"
+      name="split-button-checkbox-primary-example-input"
+    />
+    <span class="pf-v6-c-check__label">Select all items</span>
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button"
+    type="button"
+    aria-expanded="false"
+    id="split-button-checkbox-primary-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>
+&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary"
+  id="split-button-checkbox-primary-expanded-example"
+>
+  <label
+    class="pf-v6-c-check"
+    for="split-button-checkbox-primary-expanded-example-input"
+  >
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-checkbox-primary-expanded-example-input"
+      name="split-button-checkbox-primary-expanded-example-input"
+    />
+    <span class="pf-v6-c-check__label">Select all items</span>
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button"
+    type="button"
+    aria-expanded="true"
+    id="split-button-checkbox-primary-expanded-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>
+&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary"
+  id="split-button-checkbox-primary-disabled-example"
+>
+  <label
+    class="pf-v6-c-check"
+    for="split-button-checkbox-primary-disabled-example-input"
+  >
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      disabled
+      id="split-button-checkbox-primary-disabled-example-input"
+      name="split-button-checkbox-primary-disabled-example-input"
+    />
+    <span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button"
+    type="button"
+    aria-expanded="false"
+    id="split-button-checkbox-primary-disabled-example-toggle-button"
+    aria-label="Menu toggle"
+    disabled
+  >
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>
+
+<br />
+<br />
+
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-secondary"
+  id="split-button-checkbox-secondary-example"
+>
+  <label
+    class="pf-v6-c-check"
+    for="split-button-checkbox-secondary-example-input"
+  >
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-checkbox-secondary-example-input"
+      name="split-button-checkbox-secondary-example-input"
+    />
+    <span class="pf-v6-c-check__label">Select all items</span>
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button"
+    type="button"
+    aria-expanded="false"
+    id="split-button-checkbox-secondary-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>
+&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary"
+  id="split-button-checkbox-secondary-expanded-example"
+>
+  <label
+    class="pf-v6-c-check"
+    for="split-button-checkbox-secondary-expanded-example-input"
+  >
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-checkbox-secondary-expanded-example-input"
+      name="split-button-checkbox-secondary-expanded-example-input"
+    />
+    <span class="pf-v6-c-check__label">Select all items</span>
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button"
+    type="button"
+    aria-expanded="true"
+    id="split-button-checkbox-secondary-expanded-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>
+&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
+  id="split-button-checkbox-secondary-disabled-example"
+>
+  <label
+    class="pf-v6-c-check"
+    for="split-button-checkbox-secondary-disabled-example-input"
+  >
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      disabled
+      id="split-button-checkbox-secondary-disabled-example-input"
+      name="split-button-checkbox-secondary-disabled-example-input"
+    />
+    <span class="pf-v6-c-check__label pf-m-disabled">Select all items</span>
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button"
+    type="button"
+    aria-expanded="false"
+    id="split-button-checkbox-secondary-disabled-example-toggle-button"
+    aria-label="Menu toggle"
+    disabled
+  >
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>
+
+```
+
+### Split toggle with checkbox and toggle text
+
+To add a label to a split toggle that will be linked to the toggle button, pass the text wrapped in `span.pf-v6-c-menu-toggle__text` as a child to `button.pf-v6-c-menu-toggle__button.pf-m-text`. Clicking the text should trigger any click action on the toggle. <br/> <br/>
+Shown with default, primary, and secondary styling
+
+```html
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button"
+  id="split-button-checkbox-with-toggle-button-text-example"
+>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-checkbox-with-toggle-button-text-example-input"
+      name="split-button-checkbox-with-toggle-button-text-example-input"
+      aria-label="Select all items"
+    />
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="false"
+    id="split-button-checkbox-with-toggle-button-text-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
+  id="split-button-checkbox-with-toggle-button-text-expanded-example"
+>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-checkbox-with-toggle-button-text-expanded-example-input"
+      name="split-button-checkbox-with-toggle-button-text-expanded-example-input"
+      aria-label="Select all items"
+    />
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="true"
+    id="split-button-checkbox-with-toggle-button-text-expanded-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
+  id="split-button-checkbox-with-toggle-button-text-disabled-example"
+>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      disabled
+      id="split-button-checkbox-with-toggle-button-text-disabled-example-input"
+      name="split-button-checkbox-with-toggle-button-text-disabled-example-input"
+      aria-label="Select all items"
+    />
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="false"
+    id="split-button-checkbox-with-toggle-button-text-disabled-example-toggle-button"
+    aria-label="Menu toggle"
+    disabled
+  >
+    <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>
+
+<br />
+<br />
+
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-primary"
+  id="split-button-primary-checkbox-with-toggle-button-text-example"
+>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-primary-checkbox-with-toggle-button-text-example-input"
+      name="split-button-primary-checkbox-with-toggle-button-text-example-input"
+      aria-label="Select all items"
+    />
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="false"
+    id="split-button-primary-checkbox-with-toggle-button-text-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary"
+  id="split-button-primary-checkbox-with-toggle-button-text-expanded-example"
+>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-primary-checkbox-with-toggle-button-text-expanded-example-input"
+      name="split-button-primary-checkbox-with-toggle-button-text-expanded-example-input"
+      aria-label="Select all items"
+    />
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="true"
+    id="split-button-primary-checkbox-with-toggle-button-text-expanded-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
     </span>
-  </span>
-</button>
+  </button>
+</div>&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary"
+  id="split-button-primary-checkbox-with-toggle-button-text-disabled-example"
+>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      disabled
+      id="split-button-primary-checkbox-with-toggle-button-text-disabled-example-input"
+      name="split-button-primary-checkbox-with-toggle-button-text-disabled-example-input"
+      aria-label="Select all items"
+    />
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="false"
+    id="split-button-primary-checkbox-with-toggle-button-text-disabled-example-toggle-button"
+    aria-label="Menu toggle"
+    disabled
+  >
+    <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>
 
-&nbsp;
-<button
-  class="pf-v6-c-menu-toggle pf-m-secondary pf-m-disabled"
-  type="button"
-  aria-expanded="false"
-  disabled
+<br />
+<br />
+
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-secondary"
+  id="split-button-secondary-checkbox-with-toggle-button-text-example"
 >
-  <span class="pf-v6-c-menu-toggle__icon">
-    <i class="fas fa-cog" aria-hidden="true"></i>
-  </span>
-  <span class="pf-v6-c-menu-toggle__text">Icon</span>
-  <span class="pf-v6-c-menu-toggle__controls">
-    <span class="pf-v6-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-secondary-checkbox-with-toggle-button-text-example-input"
+      name="split-button-secondary-checkbox-with-toggle-button-text-example-input"
+      aria-label="Select all items"
+    />
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="false"
+    id="split-button-secondary-checkbox-with-toggle-button-text-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
     </span>
-  </span>
-</button>
+  </button>
+</div>&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary"
+  id="split-button-secondary-checkbox-with-toggle-button-text-expanded-example"
+>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-secondary-checkbox-with-toggle-button-text-expanded-example-input"
+      name="split-button-secondary-checkbox-with-toggle-button-text-expanded-example-input"
+      aria-label="Select all items"
+    />
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="true"
+    id="split-button-secondary-checkbox-with-toggle-button-text-expanded-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
+  id="split-button-secondary-checkbox-with-toggle-button-text-disabled-example"
+>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      disabled
+      id="split-button-secondary-checkbox-with-toggle-button-text-disabled-example-input"
+      name="split-button-secondary-checkbox-with-toggle-button-text-disabled-example-input"
+      aria-label="Select all items"
+    />
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="false"
+    id="split-button-secondary-checkbox-with-toggle-button-text-disabled-example-toggle-button"
+    aria-label="Menu toggle"
+    disabled
+  >
+    <span class="pf-v6-c-menu-toggle__text">Toggle button text</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>
 
 ```
 
-### With avatar and text
+### Split toggle with checkbox, icon, and toggle text
+
+To add a label to a split toggle that will be linked to the toggle button, pass the text wrapped in `span.pf-v6-c-menu-toggle__text` as a child to `button.pf-v6-c-menu-toggle__button.pf-m-text`. Clicking the text should trigger any click action on the toggle. <br/> <br/>
+Shown with default, primary, and secondary styling
 
 ```html
-<button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false">
-  <span class="pf-v6-c-menu-toggle__icon pf-m-avatar">
-    <img
-      class="pf-v6-c-avatar pf-m-sm"
-      alt="Avatar image"
-      src="/assets/images/img_avatar-light.svg"
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button"
+  id="split-button-checkbox-with-toggle-button-icon-text-example"
+>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-checkbox-with-toggle-button-icon-text-example-input"
+      name="split-button-checkbox-with-toggle-button-icon-text-example-input"
+      aria-label="Select all items"
     />
-  </span>
-  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
-  <span class="pf-v6-c-menu-toggle__controls">
-    <span class="pf-v6-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="false"
+    id="split-button-checkbox-with-toggle-button-icon-text-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__icon">
+      <i class="fas fa-cog" aria-hidden="true"></i>
     </span>
-  </span>
-</button>
-
-&nbsp;
-<button
-  class="pf-v6-c-menu-toggle pf-m-expanded"
-  type="button"
-  aria-expanded="true"
+    <span class="pf-v6-c-menu-toggle__text">Icon</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
+  id="split-button-checkbox-with-toggle-button-icon-text-expanded-example"
 >
-  <span class="pf-v6-c-menu-toggle__icon pf-m-avatar">
-    <img
-      class="pf-v6-c-avatar pf-m-sm"
-      alt="Avatar image"
-      src="/assets/images/img_avatar-light.svg"
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-checkbox-with-toggle-button-icon-text-expanded-example-input"
+      name="split-button-checkbox-with-toggle-button-icon-text-expanded-example-input"
+      aria-label="Select all items"
     />
-  </span>
-  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
-  <span class="pf-v6-c-menu-toggle__controls">
-    <span class="pf-v6-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="true"
+    id="split-button-checkbox-with-toggle-button-icon-text-expanded-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__icon">
+      <i class="fas fa-cog" aria-hidden="true"></i>
     </span>
-  </span>
-</button>
-
-&nbsp;
-<button
-  class="pf-v6-c-menu-toggle pf-m-disabled"
-  type="button"
-  aria-expanded="false"
-  disabled
+    <span class="pf-v6-c-menu-toggle__text">Icon</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
+  id="split-button-checkbox-with-toggle-button-icon-text-disabled-example"
 >
-  <span class="pf-v6-c-menu-toggle__icon pf-m-avatar">
-    <img
-      class="pf-v6-c-avatar pf-m-sm"
-      alt="Avatar image"
-      src="/assets/images/img_avatar-light.svg"
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      disabled
+      id="split-button-checkbox-with-toggle-button-icon-text-disabled-example-input"
+      name="split-button-checkbox-with-toggle-button-icon-text-disabled-example-input"
+      aria-label="Select all items"
     />
-  </span>
-  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
-  <span class="pf-v6-c-menu-toggle__controls">
-    <span class="pf-v6-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="false"
+    id="split-button-checkbox-with-toggle-button-icon-text-disabled-example-toggle-button"
+    aria-label="Menu toggle"
+    disabled
+  >
+    <span class="pf-v6-c-menu-toggle__icon">
+      <i class="fas fa-cog" aria-hidden="true"></i>
+    </span>
+    <span class="pf-v6-c-menu-toggle__text">Icon</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
     </span>
-  </span>
-</button>
-
-```
+  </button>
+</div>
 
-### Full height
+<br />
+<br />
 
-```html
-<button
-  class="pf-v6-c-menu-toggle pf-m-full-height"
-  type="button"
-  aria-expanded="false"
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-primary"
+  id="split-button-primary-checkbox-with-toggle-button-icon-text-example"
 >
-  <span class="pf-v6-c-menu-toggle__text">Full height</span>
-  <span class="pf-v6-c-menu-toggle__controls">
-    <span class="pf-v6-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-primary-checkbox-with-toggle-button-icon-text-example-input"
+      name="split-button-primary-checkbox-with-toggle-button-icon-text-example-input"
+      aria-label="Select all items"
+    />
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="false"
+    id="split-button-primary-checkbox-with-toggle-button-icon-text-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__icon">
+      <i class="fas fa-cog" aria-hidden="true"></i>
     </span>
-  </span>
-</button>
-
-```
-
-### Full width
-
-```html
-<button
-  class="pf-v6-c-menu-toggle pf-m-full-width"
-  type="button"
-  aria-expanded="false"
->
-  <span class="pf-v6-c-menu-toggle__text">Full width</span>
-  <span class="pf-v6-c-menu-toggle__controls">
-    <span class="pf-v6-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+    <span class="pf-v6-c-menu-toggle__text">Icon</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
     </span>
-  </span>
-</button>
-
-```
-
-### Typeahead
-
-```html
+  </button>
+</div>&nbsp;
 <div
-  class="pf-v6-c-menu-toggle pf-m-typeahead pf-m-full-width"
-  id="typeahead-example"
+  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary"
+  id="split-button-primary-checkbox-with-toggle-button-icon-text-expanded-example"
 >
-  <div class="pf-v6-c-text-input-group pf-m-plain">
-    <div class="pf-v6-c-text-input-group__main">
-      <span class="pf-v6-c-text-input-group__text">
-        <input
-          class="pf-v6-c-text-input-group__text-input"
-          type="text"
-          value
-          aria-label="Type to filter"
-        />
-      </span>
-    </div>
-    <div class="pf-v6-c-text-input-group__utilities">
-      <button
-        class="pf-v6-c-button pf-m-plain"
-        type="button"
-        aria-label="Clear input"
-      >
-        <span class="pf-v6-c-button__icon">
-          <i class="fas fa-times fa-fw" aria-hidden="true"></i>
-        </span>
-      </button>
-    </div>
-  </div>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-primary-checkbox-with-toggle-button-icon-text-expanded-example-input"
+      name="split-button-primary-checkbox-with-toggle-button-icon-text-expanded-example-input"
+      aria-label="Select all items"
+    />
+  </label>
   <button
-    class="pf-v6-c-menu-toggle__button"
+    class="pf-v6-c-menu-toggle__button pf-m-text"
     type="button"
-    aria-expanded="false"
-    id="typeahead-example-toggle-button"
+    aria-expanded="true"
+    id="split-button-primary-checkbox-with-toggle-button-icon-text-expanded-example-toggle-button"
     aria-label="Menu toggle"
   >
+    <span class="pf-v6-c-menu-toggle__icon">
+      <i class="fas fa-cog" aria-hidden="true"></i>
+    </span>
+    <span class="pf-v6-c-menu-toggle__text">Icon</span>
     <span class="pf-v6-c-menu-toggle__controls">
       <span class="pf-v6-c-menu-toggle__toggle-icon">
         <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
       </span>
     </span>
   </button>
-</div>
-
-```
-
-### Status
-
-```html
-<button
-  class="pf-v6-c-menu-toggle pf-m-success"
-  type="button"
-  aria-expanded="false"
+</div>&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary"
+  id="split-button-primary-checkbox-with-toggle-button-icon-text-disabled-example"
 >
-  <span class="pf-v6-c-menu-toggle__text">Success</span>
-  <span class="pf-v6-c-menu-toggle__controls">
-    <span class="pf-v6-c-menu-toggle__status-icon">
-      <i class="fas fa-check-circle" aria-hidden="true"></i>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      disabled
+      id="split-button-primary-checkbox-with-toggle-button-icon-text-disabled-example-input"
+      name="split-button-primary-checkbox-with-toggle-button-icon-text-disabled-example-input"
+      aria-label="Select all items"
+    />
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="false"
+    id="split-button-primary-checkbox-with-toggle-button-icon-text-disabled-example-toggle-button"
+    aria-label="Menu toggle"
+    disabled
+  >
+    <span class="pf-v6-c-menu-toggle__icon">
+      <i class="fas fa-cog" aria-hidden="true"></i>
     </span>
-    <span class="pf-v6-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+    <span class="pf-v6-c-menu-toggle__text">Icon</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
     </span>
-  </span>
-</button>
+  </button>
+</div>
 
 <br />
 <br />
 
-<button
-  class="pf-v6-c-menu-toggle pf-m-warning"
-  type="button"
-  aria-expanded="false"
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-secondary"
+  id="split-button-secondary-checkbox-with-toggle-button-icon-text-example"
 >
-  <span class="pf-v6-c-menu-toggle__text">Warning</span>
-  <span class="pf-v6-c-menu-toggle__controls">
-    <span class="pf-v6-c-menu-toggle__status-icon">
-      <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-secondary-checkbox-with-toggle-button-icon-text-example-input"
+      name="split-button-secondary-checkbox-with-toggle-button-icon-text-example-input"
+      aria-label="Select all items"
+    />
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="false"
+    id="split-button-secondary-checkbox-with-toggle-button-icon-text-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__icon">
+      <i class="fas fa-cog" aria-hidden="true"></i>
     </span>
-    <span class="pf-v6-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+    <span class="pf-v6-c-menu-toggle__text">Icon</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
     </span>
-  </span>
-</button>
-
-<br />
-<br />
-
-<button
-  class="pf-v6-c-menu-toggle pf-m-danger"
-  type="button"
-  aria-expanded="false"
+  </button>
+</div>&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary"
+  id="split-button-secondary-checkbox-with-toggle-button-icon-text-expanded-example"
 >
-  <span class="pf-v6-c-menu-toggle__text">Danger</span>
-  <span class="pf-v6-c-menu-toggle__controls">
-    <span class="pf-v6-c-menu-toggle__status-icon">
-      <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      id="split-button-secondary-checkbox-with-toggle-button-icon-text-expanded-example-input"
+      name="split-button-secondary-checkbox-with-toggle-button-icon-text-expanded-example-input"
+      aria-label="Select all items"
+    />
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="true"
+    id="split-button-secondary-checkbox-with-toggle-button-icon-text-expanded-example-toggle-button"
+    aria-label="Menu toggle"
+  >
+    <span class="pf-v6-c-menu-toggle__icon">
+      <i class="fas fa-cog" aria-hidden="true"></i>
     </span>
-    <span class="pf-v6-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+    <span class="pf-v6-c-menu-toggle__text">Icon</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
     </span>
-  </span>
-</button>
-
-```
-
-### Placeholder
-
-```html
-<button
-  class="pf-v6-c-menu-toggle pf-m-placeholder"
-  type="button"
-  aria-expanded="false"
+  </button>
+</div>&nbsp;
+<div
+  class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
+  id="split-button-secondary-checkbox-with-toggle-button-icon-text-disabled-example"
 >
-  <span class="pf-v6-c-menu-toggle__text">Placeholder text</span>
-  <span class="pf-v6-c-menu-toggle__controls">
-    <span class="pf-v6-c-menu-toggle__toggle-icon">
-      <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+  <label class="pf-v6-c-check pf-m-standalone">
+    <input
+      class="pf-v6-c-check__input"
+      type="checkbox"
+      disabled
+      id="split-button-secondary-checkbox-with-toggle-button-icon-text-disabled-example-input"
+      name="split-button-secondary-checkbox-with-toggle-button-icon-text-disabled-example-input"
+      aria-label="Select all items"
+    />
+  </label>
+  <button
+    class="pf-v6-c-menu-toggle__button pf-m-text"
+    type="button"
+    aria-expanded="false"
+    id="split-button-secondary-checkbox-with-toggle-button-icon-text-disabled-example-toggle-button"
+    aria-label="Menu toggle"
+    disabled
+  >
+    <span class="pf-v6-c-menu-toggle__icon">
+      <i class="fas fa-cog" aria-hidden="true"></i>
     </span>
-  </span>
-</button>
+    <span class="pf-v6-c-menu-toggle__text">Icon</span>
+    <span class="pf-v6-c-menu-toggle__controls">
+      <span class="pf-v6-c-menu-toggle__toggle-icon">
+        <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
+      </span>
+    </span>
+  </button>
+</div>
 
 ```
 
@@ -1367,7 +2025,6 @@ To add a label to a split toggle that will be linked to the toggle button, pass
 | `.pf-v6-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
 | `.pf-v6-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
 | `.pf-m-split-button` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
-| `.pf-m-action` | `.pf-v6-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
 | `.pf-m-text` | `.pf-v6-c-menu-toggle__button` | Modifies the menu toggle component split button variation with text. |
 | `.pf-m-disabled` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
 | `.pf-m-primary` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |