@patternfly/patternfly 6.0.0-alpha.96 → 6.0.0-alpha.98

package/components/MenuToggle/menu-toggle.css

@@ -29,6 +29,8 @@
   --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-menu-toggle--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --pf-v6-c-menu-toggle__icon--Height: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
+  --pf-v6-c-menu-toggle__toggle-icon--Height: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
   --pf-v6-c-menu-toggle--m-button--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v6-c-menu-toggle--m-button--PaddingRight: var(--pf-t--global--spacer--md);
   --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -103,6 +105,8 @@
   --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
   --pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
+  --pf-v6-c-menu-toggle--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-menu-toggle--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
 }
 
 .pf-v6-c-menu-toggle {
@@ -230,6 +234,10 @@
 .pf-v6-c-menu-toggle.pf-m-primary::before, .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled)::before {
   border: 0;
 }
+.pf-v6-c-menu-toggle.pf-m-small {
+  --pf-v6-c-menu-toggle--PaddingTop: var(--pf-v6-c-menu-toggle--m-small--PaddingTop);
+  --pf-v6-c-menu-toggle--PaddingBottom: var(--pf-v6-c-menu-toggle--m-small--PaddingBottom);
+}
 .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
   background-color: transparent;
 }
@@ -340,11 +348,6 @@
   padding-inline-start: 0;
 }
 
-.pf-v6-c-menu-toggle__icon {
-  flex-shrink: 0;
-  align-self: center;
-}
-
 .pf-v6-c-menu-toggle__text {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -357,14 +360,25 @@
   flex-wrap: nowrap;
 }
 
-.pf-v6-c-menu-toggle__controls {
+.pf-v6-c-menu-toggle__icon,
+.pf-v6-c-menu-toggle__controls,
+.pf-v6-c-menu-toggle__toggle-icon {
   display: flex;
   align-items: center;
   justify-content: center;
+}
+
+.pf-v6-c-menu-toggle__icon {
+  flex-shrink: 0;
+  height: var(--pf-v6-c-menu-toggle__icon--Height);
+}
+
+.pf-v6-c-menu-toggle__controls {
   min-width: var(--pf-v6-c-menu-toggle__controls--MinWidth);
   margin-inline-start: auto;
 }
 
 .pf-v6-c-menu-toggle__toggle-icon {
+  height: var(--pf-v6-c-menu-toggle__toggle-icon--Height);
   color: var(--pf-v6-c-menu-toggle__toggle-icon--Color, inherit);
 }

package/components/MenuToggle/menu-toggle.scss

@@ -6,6 +6,7 @@
 // TODO: abstract button / control styling to affect any/all variants
 // TODO: move controls to wrap buttons, not the other way around
 // TODO: update text-input-button to use gap
+// TODO: label all variables group - // * Menu toggle (vars) // - Menu toggle (selectors)
 
 :where(:root),
 :where(.#{$menu-toggle}) {
@@ -47,6 +48,12 @@
   --#{$menu-toggle}--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --#{$menu-toggle}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
 
+  // * Menu toggle icon
+  --#{$menu-toggle}__icon--Height: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
+
+  // * Menu toggle toggle icon
+  --#{$menu-toggle}__toggle-icon--Height: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
+
   // TODO: add pf-m-button modifier here
   // * Menu toggle button
   --#{$menu-toggle}--m-button--PaddingLeft: var(--pf-t--global--spacer--md);
@@ -152,6 +159,10 @@
   // Typeahead
   --#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}--m-typeahead__button--AlignSelf: stretch;
+
+  // * Menu toggle small
+  --#{$menu-toggle}--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
+  --#{$menu-toggle}--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
 }
 
 .#{$menu-toggle} {
@@ -300,6 +311,12 @@
     }
   }
 
+  // - Menu item small
+  &.pf-m-small {
+    --#{$menu-toggle}--PaddingTop: var(--#{$menu-toggle}--m-small--PaddingTop);
+    --#{$menu-toggle}--PaddingBottom: var(--#{$menu-toggle}--m-small--PaddingBottom);
+  }
+
   &:has(.#{$button}) {
     background-color: transparent;
   }
@@ -451,11 +468,6 @@
   }
 }
 
-.#{$menu-toggle}__icon {
-  flex-shrink: 0;
-  align-self: center;
-}
-
 .#{$menu-toggle}__text {
   @include pf-v5-text-overflow;
 
@@ -467,14 +479,28 @@
   flex-wrap: nowrap;
 }
 
-.#{$menu-toggle}__controls {
+// - Menu toggle controls - Menu toggle icon
+.#{$menu-toggle}__icon,
+.#{$menu-toggle}__controls,
+.#{$menu-toggle}__toggle-icon {
   display: flex;
   align-items: center;
   justify-content: center;
+}
+
+.#{$menu-toggle}__icon {
+  flex-shrink: 0;
+  height: var(--#{$menu-toggle}__icon--Height);
+}
+
+// - Menu toggle controls
+.#{$menu-toggle}__controls {
   min-width: var(--#{$menu-toggle}__controls--MinWidth);
   margin-inline-start: auto; // TODO: possibly replace as part of one of the other TODOs at top of file
 }
 
+// - Menu toggle icon
 .#{$menu-toggle}__toggle-icon {
+  height: var(--#{$menu-toggle}__toggle-icon--Height);
   color: var(--#{$menu-toggle}__toggle-icon--Color, inherit);
 }

package/docs/components/LogViewer/examples/LogViewer.md

@@ -89,7 +89,19 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-controls="log-viewer-basic-example-toolbar-expandable-content"
               >
                 <span class="pf-v6-c-menu-toggle__icon">
-                  <i class="fas fa-search" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v5-svg"
+                    viewBox="0 0 192 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -661,7 +673,19 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-controls="log-viewer-line-number-example-toolbar-expandable-content"
               >
                 <span class="pf-v6-c-menu-toggle__icon">
-                  <i class="fas fa-search" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v5-svg"
+                    viewBox="0 0 192 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -1233,7 +1257,19 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-controls="log-viewer-line-number-chars-example-toolbar-expandable-content"
               >
                 <span class="pf-v6-c-menu-toggle__icon">
-                  <i class="fas fa-search" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v5-svg"
+                    viewBox="0 0 192 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -1805,7 +1841,19 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-controls="log-viewer-text-wrap-example-toolbar-expandable-content"
               >
                 <span class="pf-v6-c-menu-toggle__icon">
-                  <i class="fas fa-search" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v5-svg"
+                    viewBox="0 0 192 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -2377,7 +2425,19 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-controls="log-viewer-text-nowrap-example-toolbar-expandable-content"
               >
                 <span class="pf-v6-c-menu-toggle__icon">
-                  <i class="fas fa-search" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v5-svg"
+                    viewBox="0 0 192 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -2949,7 +3009,19 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-controls="log-viewer-search-results-example-toolbar-expandable-content"
               >
                 <span class="pf-v6-c-menu-toggle__icon">
-                  <i class="fas fa-search" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v5-svg"
+                    viewBox="0 0 192 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -3591,7 +3663,19 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-controls="log-viewer-max-height-example-toolbar-expandable-content"
               >
                 <span class="pf-v6-c-menu-toggle__icon">
-                  <i class="fas fa-search" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v5-svg"
+                    viewBox="0 0 192 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -4163,7 +4247,19 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-controls="log-viewer-dropdowns-expanded-example-toolbar-expandable-content"
               >
                 <span class="pf-v6-c-menu-toggle__icon">
-                  <i class="fas fa-search" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v5-svg"
+                    viewBox="0 0 192 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -4733,7 +4829,19 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-controls="log-viewer-popover-expanded-example-toolbar-expandable-content"
               >
                 <span class="pf-v6-c-menu-toggle__icon">
-                  <i class="fas fa-search" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v5-svg"
+                    viewBox="0 0 192 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -5338,7 +5446,19 @@ cssPrefix: pf-v5-c-log-viewer
                 aria-controls="log-viewer-dark-example-toolbar-expandable-content"
               >
                 <span class="pf-v6-c-menu-toggle__icon">
-                  <i class="fas fa-search" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v5-svg"
+                    viewBox="0 0 192 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>

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

@@ -212,8 +212,20 @@ cssPrefix: pf-v5-c-menu-toggle
   aria-expanded="false"
   aria-label="Actions"
 >
-  <span class="pf-v6-c-menu-toggle__icon">
-    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+  <span class="pf-v6-c-menu-toggle__toggle-icon">
+    <svg
+      class="pf-v5-svg"
+      viewBox="0 0 192 512"
+      fill="currentColor"
+      aria-hidden="true"
+      role="img"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+      />
+    </svg>
   </span>
 </button>
 &nbsp;
@@ -223,8 +235,20 @@ cssPrefix: pf-v5-c-menu-toggle
   aria-expanded="true"
   aria-label="Actions"
 >
-  <span class="pf-v6-c-menu-toggle__icon">
-    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+  <span class="pf-v6-c-menu-toggle__toggle-icon">
+    <svg
+      class="pf-v5-svg"
+      viewBox="0 0 192 512"
+      fill="currentColor"
+      aria-hidden="true"
+      role="img"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+      />
+    </svg>
   </span>
 </button>
 &nbsp;
@@ -235,8 +259,20 @@ cssPrefix: pf-v5-c-menu-toggle
   disabled
   aria-label="Actions"
 >
-  <span class="pf-v6-c-menu-toggle__icon">
-    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+  <span class="pf-v6-c-menu-toggle__toggle-icon">
+    <svg
+      class="pf-v5-svg"
+      viewBox="0 0 192 512"
+      fill="currentColor"
+      aria-hidden="true"
+      role="img"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+      />
+    </svg>
   </span>
 </button>
 
@@ -467,6 +503,126 @@ cssPrefix: pf-v5-c-menu-toggle
 
 ```
 
+### Small
+
+```html
+<button
+  class="pf-v6-c-menu-toggle pf-m-plain pf-m-small"
+  type="button"
+  aria-expanded="false"
+  aria-label="Actions"
+>
+  <span class="pf-v6-c-menu-toggle__toggle-icon">
+    <svg
+      class="pf-v5-svg"
+      viewBox="0 0 192 512"
+      fill="currentColor"
+      aria-hidden="true"
+      role="img"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+      />
+    </svg>
+  </span>
+</button>
+&nbsp;
+<button
+  class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-expanded"
+  type="button"
+  aria-expanded="true"
+  aria-label="Actions"
+>
+  <span class="pf-v6-c-menu-toggle__toggle-icon">
+    <svg
+      class="pf-v5-svg"
+      viewBox="0 0 192 512"
+      fill="currentColor"
+      aria-hidden="true"
+      role="img"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+      />
+    </svg>
+  </span>
+</button>
+&nbsp;
+<button
+  class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-disabled"
+  type="button"
+  aria-expanded="false"
+  disabled
+  aria-label="Actions"
+>
+  <span class="pf-v6-c-menu-toggle__toggle-icon">
+    <svg
+      class="pf-v5-svg"
+      viewBox="0 0 192 512"
+      fill="currentColor"
+      aria-hidden="true"
+      role="img"
+      width="1em"
+      height="1em"
+    >
+      <path
+        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
+      />
+    </svg>
+  </span>
+</button>
+
+```
+
+### Small with text
+
+```html
+<button
+  class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text"
+  type="button"
+  aria-expanded="false"
+>
+  <span class="pf-v6-c-menu-toggle__text">Collapsed</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
+&nbsp;
+<button
+  class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text pf-m-expanded"
+  type="button"
+  aria-expanded="true"
+>
+  <span class="pf-v6-c-menu-toggle__text">Expanded</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
+&nbsp;
+<button
+  class="pf-v6-c-menu-toggle pf-m-plain pf-m-small pf-m-text pf-m-disabled"
+  type="button"
+  aria-expanded="false"
+  disabled
+>
+  <span class="pf-v6-c-menu-toggle__text">Disabled</span>
+  <span class="pf-v6-c-menu-toggle__controls">
+    <span class="pf-v6-c-menu-toggle__toggle-icon">
+      <i class="fas fa-caret-down" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>
+
+```
+
 ### Split button, primary
 
 ```html