@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50

package/docs/components/Toolbar/examples/Toolbar.md

@@ -14,8 +14,8 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
 | -- | -- | -- |
 | `.pf-v6-c-toolbar__group` | `--pf-v6-c-toolbar__group--ColumnGap` | `16px` |
 | `.pf-v6-c-toolbar__item` | `--pf-v6-c-toolbar__item--ColumnGap` | `16px` |
-| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 
 ### Toolbar item types
 
@@ -37,7 +37,7 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
 
 Several components in the following examples do not include functional and/or accessibility specifications (for example `.pf-v6-c-select`, `.pf-v6-c-options-menu`). Rather, `.pf-v6-c-toolbar` focuses on functionality and accessibility specifications that apply to it only.
 
-**Available [breakpoints](/tokens/all-patternfly-tokens) are: `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl`.**
+**Available [breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are: `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl`.**
 
 ## Examples
 
@@ -181,8 +181,8 @@ Several components in the following examples do not include functional and/or ac
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `--pf-v6-c-toolbar__item--Width: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the width value of a toolbar item at optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `--pf-v6-c-toolbar__item--MinWidth: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the min width value of a toolbar item at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `--pf-v6-c-toolbar__item--Width: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the width value of a toolbar item at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `--pf-v6-c-toolbar__item--MinWidth: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the min width value of a toolbar item at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 
 ## Group types
 
@@ -328,7 +328,19 @@ Several components in the following examples do not include functional and/or ac
         aria-label="Column view"
       >
         <span class="pf-v6-c-button__icon">
-          <i class="fas fa-columns" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 512 512"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64V160h160v256zm224 0H288V160h160v256z"
+            />
+          </svg>
         </span>
       </button>
     </div>
@@ -339,7 +351,19 @@ Several components in the following examples do not include functional and/or ac
         aria-label="Expand"
       >
         <span class="pf-v6-c-button__icon">
-          <i class="fas fa-expand" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 448 512"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z"
+            />
+          </svg>
         </span>
       </button>
     </div>
@@ -350,7 +374,19 @@ Several components in the following examples do not include functional and/or ac
         aria-label="Settings"
       >
         <span class="pf-v6-c-button__icon">
-          <i class="fas fa-cog" aria-hidden="true"></i>
+          <svg
+            class="pf-v6-svg"
+            viewBox="0 0 512 512"
+            fill="currentColor"
+            aria-hidden="true"
+            role="img"
+            width="1em"
+            height="1em"
+          >
+            <path
+              d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
+            />
+          </svg>
         </span>
       </button>
     </div>
@@ -419,7 +455,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-group-label-group-label-group-statusremove-label-one"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -444,7 +492,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-group-label-group-label-group-statusremove-label-two"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -469,7 +529,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-group-label-group-label-group-statusremove-label-three"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -511,7 +583,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-group-label-group-label-group-riskremove-label-one"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -536,7 +620,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-group-label-group-label-group-riskremove-label-two"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -561,7 +657,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-group-label-group-label-group-riskremove-label-three"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -1396,7 +1504,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-one"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -1421,7 +1541,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-two"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -1446,7 +1578,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-three"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -1488,7 +1632,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-one"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -1513,7 +1669,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-two"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -1538,7 +1706,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-three"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -1713,7 +1893,19 @@ Several components in the following examples do not include functional and/or ac
                           id="toolbar-selected-filters-example-label-group-statusremove-label-one"
                         >
                           <span class="pf-v6-c-button__icon">
-                            <i class="fas fa-times" aria-hidden="true"></i>
+                            <svg
+                              class="pf-v6-svg"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                              aria-hidden="true"
+                              role="img"
+                              width="1em"
+                              height="1em"
+                            >
+                              <path
+                                d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                              />
+                            </svg>
                           </span>
                         </button>
                       </span>
@@ -1738,7 +1930,19 @@ Several components in the following examples do not include functional and/or ac
                           id="toolbar-selected-filters-example-label-group-statusremove-label-two"
                         >
                           <span class="pf-v6-c-button__icon">
-                            <i class="fas fa-times" aria-hidden="true"></i>
+                            <svg
+                              class="pf-v6-svg"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                              aria-hidden="true"
+                              role="img"
+                              width="1em"
+                              height="1em"
+                            >
+                              <path
+                                d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                              />
+                            </svg>
                           </span>
                         </button>
                       </span>
@@ -1763,7 +1967,19 @@ Several components in the following examples do not include functional and/or ac
                           id="toolbar-selected-filters-example-label-group-statusremove-label-three"
                         >
                           <span class="pf-v6-c-button__icon">
-                            <i class="fas fa-times" aria-hidden="true"></i>
+                            <svg
+                              class="pf-v6-svg"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                              aria-hidden="true"
+                              role="img"
+                              width="1em"
+                              height="1em"
+                            >
+                              <path
+                                d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                              />
+                            </svg>
                           </span>
                         </button>
                       </span>
@@ -1805,7 +2021,19 @@ Several components in the following examples do not include functional and/or ac
                           id="toolbar-selected-filters-example-label-group-riskremove-label-one"
                         >
                           <span class="pf-v6-c-button__icon">
-                            <i class="fas fa-times" aria-hidden="true"></i>
+                            <svg
+                              class="pf-v6-svg"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                              aria-hidden="true"
+                              role="img"
+                              width="1em"
+                              height="1em"
+                            >
+                              <path
+                                d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                              />
+                            </svg>
                           </span>
                         </button>
                       </span>
@@ -1830,7 +2058,19 @@ Several components in the following examples do not include functional and/or ac
                           id="toolbar-selected-filters-example-label-group-riskremove-label-two"
                         >
                           <span class="pf-v6-c-button__icon">
-                            <i class="fas fa-times" aria-hidden="true"></i>
+                            <svg
+                              class="pf-v6-svg"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                              aria-hidden="true"
+                              role="img"
+                              width="1em"
+                              height="1em"
+                            >
+                              <path
+                                d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                              />
+                            </svg>
                           </span>
                         </button>
                       </span>
@@ -1855,7 +2095,19 @@ Several components in the following examples do not include functional and/or ac
                           id="toolbar-selected-filters-example-label-group-riskremove-label-three"
                         >
                           <span class="pf-v6-c-button__icon">
-                            <i class="fas fa-times" aria-hidden="true"></i>
+                            <svg
+                              class="pf-v6-svg"
+                              viewBox="0 0 20 20"
+                              fill="currentColor"
+                              aria-hidden="true"
+                              role="img"
+                              width="1em"
+                              height="1em"
+                            >
+                              <path
+                                d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                              />
+                            </svg>
                           </span>
                         </button>
                       </span>
@@ -1999,7 +2251,19 @@ Several components in the following examples do not include functional and/or ac
                 disabled
               >
                 <span class="pf-v6-c-button__icon">
-                  <i class="fas fa-angle-double-left" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 448 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -2011,7 +2275,19 @@ Several components in the following examples do not include functional and/or ac
                 disabled
               >
                 <span class="pf-v6-c-button__icon">
-                  <i class="fas fa-angle-left" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 256 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -2038,7 +2314,19 @@ Several components in the following examples do not include functional and/or ac
                 aria-label="Go to next page"
               >
                 <span class="pf-v6-c-button__icon">
-                  <i class="fas fa-angle-right" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 256 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -2049,7 +2337,19 @@ Several components in the following examples do not include functional and/or ac
                 aria-label="Go to last page"
               >
                 <span class="pf-v6-c-button__icon">
-                  <i class="fas fa-angle-double-right" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 448 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -2196,7 +2496,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-stacked-collapsed-example-label-group-statusremove-label-one"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -2221,7 +2533,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-stacked-collapsed-example-label-group-statusremove-label-two"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -2246,7 +2570,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-stacked-collapsed-example-label-group-statusremove-label-three"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -2288,7 +2624,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-stacked-collapsed-example-label-group-riskremove-label-one"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -2313,7 +2661,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-stacked-collapsed-example-label-group-riskremove-label-two"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -2338,7 +2698,19 @@ Several components in the following examples do not include functional and/or ac
                             id="toolbar-stacked-collapsed-example-label-group-riskremove-label-three"
                           >
                             <span class="pf-v6-c-button__icon">
-                              <i class="fas fa-times" aria-hidden="true"></i>
+                              <svg
+                                class="pf-v6-svg"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                                aria-hidden="true"
+                                role="img"
+                                width="1em"
+                                height="1em"
+                              >
+                                <path
+                                  d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                                />
+                              </svg>
                             </span>
                           </button>
                         </span>
@@ -2420,7 +2792,19 @@ Several components in the following examples do not include functional and/or ac
                 disabled
               >
                 <span class="pf-v6-c-button__icon">
-                  <i class="fas fa-angle-double-left" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 448 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -2432,7 +2816,19 @@ Several components in the following examples do not include functional and/or ac
                 disabled
               >
                 <span class="pf-v6-c-button__icon">
-                  <i class="fas fa-angle-left" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 256 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -2459,7 +2855,19 @@ Several components in the following examples do not include functional and/or ac
                 aria-label="Go to next page"
               >
                 <span class="pf-v6-c-button__icon">
-                  <i class="fas fa-angle-right" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 256 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -2470,7 +2878,19 @@ Several components in the following examples do not include functional and/or ac
                 aria-label="Go to last page"
               >
                 <span class="pf-v6-c-button__icon">
-                  <i class="fas fa-angle-double-right" aria-hidden="true"></i>
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 448 512"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+                    />
+                  </svg>
                 </span>
               </button>
             </div>
@@ -2612,6 +3032,33 @@ Etiam nulla lacus, porttitor vel volutpat et, malesuada id nunc. Suspendisse por
 
 ```
 
+### Vertical
+
+```html isBeta
+<div class="pf-v6-c-toolbar pf-m-vertical" id="toolbar-vertical-example">
+  <div class="pf-v6-c-toolbar__content">
+    <div class="pf-v6-c-toolbar__content-section">
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <hr class="pf-v6-c-divider" />
+
+      <div class="pf-v6-c-toolbar__group">
+        <div class="pf-v6-c-toolbar__item">Item</div>
+        <div class="pf-v6-c-toolbar__item">Item</div>
+        <div class="pf-v6-c-toolbar__item">Item</div>
+      </div>
+
+      <hr class="pf-v6-c-divider" />
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+    </div>
+  </div>
+</div>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -2636,6 +3083,7 @@ As the toolbar component is a hybrid layout and component, some of its elements
 | `.pf-m-secondary` | `.pf-v6-c-toolbar` | Modifies toolbar to have secondary background color. |
 | `.pf-m-no-padding` | `.pf-v6-c-toolbar` | Modifies toolbar to have no padding. |
 | `.pf-m-no-background` | `.pf-v6-c-toolbar` | Modifies toolbar to have no background color. |
+| `.pf-m-vertical` | `.pf-v6-c-toolbar` | Modifies toolbar for a vertical layout. |
 | `.pf-m-expanded` | `.pf-v6-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
 | `.pf-m-expanded` | `.pf-v6-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
 | `.pf-m-action-group` | `.pf-v6-c-toolbar__group` | Initiates action group spacing. |
@@ -2674,5 +3122,5 @@ As the toolbar component is a hybrid layout and component, some of its elements
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `.pf-m-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column and row gap for toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column and row gap for toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |