npm - @patternfly/patternfly-doc-core - Versions diffs - 1.12.0 → 1.12.1 - Mend

@patternfly/patternfly-doc-core 1.12.0 → 1.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (460) hide show

package/dist/docs/components/toolbar/index.html ADDED Viewed

@@ -0,0 +1,111 @@
+<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.9.3"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
+<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css">
+<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
+<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
+<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page">  <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="12XziJ" prefix="r5" component-url="/_astro/PageToggle.Dnbvoa7R.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;data-astro-transition-persist&quot;:[0,&quot;astro-u5p5alki-2&quot;]}" ssr client="idle" opts="{&quot;name&quot;:&quot;PageToggle&quot;,&quot;value&quot;:true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-472"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="Z6IiCv" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{&quot;name&quot;:&quot;ReactToolbar&quot;,&quot;value&quot;:true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-158"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-473"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-474"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-158"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;navData&quot;:[1,[[1,[[0,{&quot;id&quot;:[0,&quot;src/components/aboutmodal/examples/aboutmodal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;About modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/accordion/examples/accordion&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accordion&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/actionlist/examples/actionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Action list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/alert/examples/alert&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alert&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/avatar/examples/avatar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Avatar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backtotop/examples/backtotop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Back to top&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backdrop/examples/backdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Backdrop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backgroundimage/examples/backgroundimage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background image&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/badge/examples/badge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/banner/examples/banner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Banner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/brand/examples/brand&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Brand&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/breadcrumb/examples/breadcrumb&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Breadcrumb&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/button/examples/button&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Button&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/calendarmonth/examples/calendarmonth&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Calendar month&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/card/examples/card&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/checkbox/examples/checkbox&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Checkbox&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/chip/examples/chip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Chip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/clipboardcopy/examples/clipboardcopy&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Clipboard copy&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/codeblock/examples/codeblock&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code block&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/content/examples/content&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datalist/examples/datalist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Data list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datepicker/examples/datepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Date picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/descriptionlist/examples/descriptionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Description list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/divider/examples/divider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Divider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/dragdrop/examples/dragdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drag and drop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/drawer/examples/drawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/dropdown/examples/dropdown&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dropdown&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/duallistselector/examples/duallistselector&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dual list selector&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/emptystate/examples/emptystate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Empty state&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/expandablesection/examples/expandablesection&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Expandable section&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/form/examples/form&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/formselect/examples/formselect&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/helpertext/examples/helpertext&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Helper text&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/hint/examples/hint&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Hint&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/icon/examples/icon&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Icon&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/inputgroup/examples/inputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/jumplinks/examples/jumplinks&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Jump links&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/label/examples/label&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Label&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/list/examples/list&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;List&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/loginpage/examples/loginpage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Login page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/masthead/examples/masthead&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Masthead&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menu/examples/menu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menutoggle/examples/menutoggle&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu toggle&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/modal/examples/modal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/multiplefileupload/examples/multiplefileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Multiple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/nav/examples/nav&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Navigation&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationbadge/examples/notificationbadge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationdrawer/examples/notificationdrawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/numberinput/examples/numberinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Number input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/overflowmenu/examples/overflowmenu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Overflow menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/page/examples/page&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/pagination/examples/pagination&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Pagination&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/panel/examples/panel&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Panel&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/popover/examples/popover&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Popover&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progress/examples/progress&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progressstepper/examples/progressstepper&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress stepper&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/radio/examples/radio&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Radio&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/searchinput/examples/searchinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Search input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/select/examples/select&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/sidebar/examples/sidebar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sidebar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/fileupload/examples/fileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/simplelist/examples/simplelist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skeleton/examples/skeleton&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skeleton&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skiptocontent/examples/skiptocontent&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skip to content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/slider/examples/slider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Slider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/spinner/examples/spinner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spinner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/switch/examples/switch&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Switch&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tabs/examples/tabs&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tabs&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textarea/examples/textarea&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text area&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinput/examples/textinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinputgroup/examples/textinputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/tile/examples/tile&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tile&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timepicker/examples/timepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Time picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timestamp/examples/timestamp&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Timestamp&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/title/examples/title&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Title&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/togglegroup/examples/togglegroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toggle group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/toolbar/examples/toolbar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toolbar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tooltip/examples/tooltip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tooltip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/treeview/examples/treeview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tree view&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/truncate/examples/truncate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Truncate&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/wizard/examples/wizard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Wizard&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}]]]]],&quot;data-astro-transition-scope&quot;:[0,&quot;astro-xikxfxwm-3&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;ReactNav&quot;,&quot;value&quot;:&quot;react&quot;}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body">    <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item pf-m-current"> <a class="pf-v6-c-tabs__link" href="/components/toolbar/react"> React </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2941" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2942" data-pf-content="true" class="pf-v6-c-content--h3">Toolbar items</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2943" data-pf-content="true" class="pf-v6-c-content--p">A toolbar can contain multiple toolbar items, like filters and buttons.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2978" data-pf-content="true" class="pf-v6-c-content--p">Note: This example does not demonstrate responsive toolbar behavior. Responsive toolbars are shown in the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2944" data-pf-content="true" class="pf-v6-c-content--a">examples with toggle groups and filters</a>.</p>
+<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="b8Uz9" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment } from &#39;react&#39;;\nimport { Toolbar, ToolbarItem, ToolbarContent } from &#39;@patternfly/react-core&#39;;\nimport { Button, SearchInput } from &#39;@patternfly/react-core&#39;;\n\nexport const ToolbarItems: React.FunctionComponent = () =&gt; {\n  const items = (\n    &lt;Fragment&gt;\n      &lt;ToolbarItem&gt;\n        &lt;SearchInput aria-label=\&quot;Items example search input\&quot; /&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Button variant=\&quot;secondary\&quot;&gt;Action&lt;/Button&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem variant=\&quot;separator\&quot; /&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Button variant=\&quot;primary\&quot;&gt;Action&lt;/Button&gt;\n      &lt;/ToolbarItem&gt;\n    &lt;/Fragment&gt;\n  );\n\n  return (\n    &lt;Toolbar id=\&quot;toolbar-items-example\&quot;&gt;\n      &lt;ToolbarContent&gt;{items}&lt;/ToolbarContent&gt;\n    &lt;/Toolbar&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2945" data-pf-content="true" class="pf-v6-c-content--h3">With adjusted inset</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2970" data-pf-content="true" class="pf-v6-c-content--p">To adjust a toolbar’s inset, use the <code>inset</code> property. You can set the inset value at multiple breakpoints, including “default”, “md”, “lg, “xl”, and “2xl”. Inset values include “insetNone”, “insetSm”, “insetMd”, “insetLg”, “insetXl”, and “inset2xl”.</p>
+<astro-island uid="Z2igcwR" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment } from &#39;react&#39;;\nimport { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from &#39;@patternfly/react-core&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\n\nexport const ToolbarInsets: React.FunctionComponent = () =&gt; {\n  const items = (\n    &lt;Fragment&gt;\n      &lt;ToolbarGroup variant=\&quot;action-group\&quot;&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Action&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Action&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Action&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Action&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n      &lt;ToolbarItem variant=\&quot;separator\&quot;&gt;&lt;/ToolbarItem&gt;\n      &lt;ToolbarGroup variant=\&quot;action-group\&quot;&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Action&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;primary\&quot;&gt;Action&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n      &lt;ToolbarItem variant=\&quot;separator\&quot;&gt;&lt;/ToolbarItem&gt;\n      &lt;ToolbarGroup variant=\&quot;action-group\&quot;&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Action&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Action&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n    &lt;/Fragment&gt;\n  );\n\n  return (\n    &lt;Toolbar\n      id=\&quot;toolbar-insets\&quot;\n      inset={{\n        default: &#39;insetNone&#39;,\n        md: &#39;insetSm&#39;,\n        xl: &#39;inset2xl&#39;,\n        &#39;2xl&#39;: &#39;insetLg&#39;\n      }}\n    &gt;\n      &lt;ToolbarContent&gt;{items}&lt;/ToolbarContent&gt;\n    &lt;/Toolbar&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2946" data-pf-content="true" class="pf-v6-c-content--h3">Sticky toolbar</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2947" data-pf-content="true" class="pf-v6-c-content--p">To lock a toolbar and prevent it from scrolling with other content, use a sticky toolbar.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2948" data-pf-content="true" class="pf-v6-c-content--p">In the following example, toggle the “is toolbar sticky” checkbox to see the difference between a sticky and non-sticky toolbar.</p>
+<astro-island uid="rSQo9" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from &#39;@patternfly/react-core&#39;;\n\nexport const ToolbarSticky: React.FunctionComponent = () =&gt; {\n  const [isSticky, setIsSticky] = useState(true);\n  const [showEvenOnly, setShowEvenOnly] = useState(true);\n  const array = Array.from(Array(30), (_, x) =&gt; x); // create array of numbers from 1-30 for demo purposes\n  const numbers = showEvenOnly ? array.filter((number) =&gt; number % 2 === 0) : array;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;div style={{ overflowY: &#39;scroll&#39;, height: &#39;200px&#39; }}&gt;\n        &lt;Toolbar id=\&quot;toolbar-sticky\&quot; inset={{ default: &#39;insetNone&#39; }} isSticky={isSticky}&gt;\n          &lt;ToolbarContent&gt;\n            &lt;ToolbarItem&gt;\n              &lt;SearchInput aria-label=\&quot;Sticky example search input\&quot; /&gt;\n            &lt;/ToolbarItem&gt;\n            &lt;ToolbarItem alignSelf=\&quot;center\&quot;&gt;\n              &lt;Checkbox\n                label=\&quot;Show only even number items\&quot;\n                isChecked={showEvenOnly}\n                onChange={(_event, checked) =&gt; setShowEvenOnly(checked)}\n                id=\&quot;showOnlyEvenCheckbox\&quot;\n              /&gt;\n            &lt;/ToolbarItem&gt;\n          &lt;/ToolbarContent&gt;\n        &lt;/Toolbar&gt;\n        &lt;ul&gt;\n          {numbers.map((number) =&gt; (\n            &lt;li key={number}&gt;{`item ${number}`}&lt;/li&gt;\n          ))}\n        &lt;/ul&gt;\n      &lt;/div&gt;\n      &lt;Checkbox\n        label=\&quot;Is toolbar sticky\&quot;\n        isChecked={isSticky}\n        onChange={(_event, checked) =&gt; setIsSticky(checked)}\n        id=\&quot;isStickyCheckbox\&quot;\n      /&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2949" data-pf-content="true" class="pf-v6-c-content--h3">With groups of items</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2950" data-pf-content="true" class="pf-v6-c-content--p">You can group similar items together to create desired associations and to enable items to respond to changes in viewport width together.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2979" data-pf-content="true" class="pf-v6-c-content--p">Note: This example does not demonstrate responsive toolbar behavior. Responsive toolbars are shown in the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2951" data-pf-content="true" class="pf-v6-c-content--a">examples with toggle groups and filters</a>.</p>
+<astro-island uid="Z1nkPMa" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Button,\n  MenuToggle,\n  MenuToggleElement,\n  Toolbar,\n  ToolbarContent,\n  ToolbarGroup,\n  ToolbarItem,\n  Select,\n  SelectList,\n  SelectOption\n} from &#39;@patternfly/react-core&#39;;\nimport EditIcon from &#39;@patternfly/react-icons/dist/esm/icons/edit-icon&#39;;\nimport CloneIcon from &#39;@patternfly/react-icons/dist/esm/icons/clone-icon&#39;;\nimport SyncIcon from &#39;@patternfly/react-icons/dist/esm/icons/sync-icon&#39;;\n\nexport const ToolbarGroups: React.FunctionComponent = () =&gt; {\n  const firstOptions = [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;];\n  const secondOptions = [&#39;1&#39;, &#39;2&#39;, &#39;3&#39;];\n  const thirdOptions = [&#39;I&#39;, &#39;II&#39;, &#39;III&#39;];\n\n  const [firstIsExpanded, setFirstIsExpanded] = useState(false);\n  const [firstSelected, setFirstSelected] = useState(&#39;&#39;);\n  const [secondIsExpanded, setSecondIsExpanded] = useState(false);\n  const [secondSelected, setSecondSelected] = useState(&#39;&#39;);\n  const [thirdIsExpanded, setThirdIsExpanded] = useState(false);\n  const [thirdSelected, setThirdSelected] = useState(&#39;&#39;);\n\n  const onToggle = (filterName: string) =&gt; {\n    switch (filterName) {\n      case &#39;first&#39;:\n        setFirstIsExpanded(!firstIsExpanded);\n        break;\n      case &#39;second&#39;:\n        setSecondIsExpanded(!secondIsExpanded);\n        break;\n      case &#39;third&#39;:\n        setThirdIsExpanded(!thirdIsExpanded);\n        break;\n    }\n  };\n\n  const onFirstSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, selection: string) =&gt; {\n    setFirstSelected(selection);\n    setFirstIsExpanded(false);\n  };\n\n  const onSecondSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, selection: string) =&gt; {\n    setSecondSelected(selection);\n    setSecondIsExpanded(false);\n  };\n\n  const onThirdSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, selection: string) =&gt; {\n    setThirdSelected(selection);\n    setThirdIsExpanded(false);\n  };\n\n  const filterGroupItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Select\n          toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n            &lt;MenuToggle\n              ref={toggleRef}\n              onClick={() =&gt; onToggle(&#39;first&#39;)}\n              isExpanded={firstIsExpanded}\n              style={\n                {\n                  width: &#39;88px&#39;\n                } as React.CSSProperties\n              }\n            &gt;\n              {firstSelected || &#39;First&#39;}\n            &lt;/MenuToggle&gt;\n          )}\n          onSelect={onFirstSelect}\n          onOpenChange={(isOpen) =&gt; setFirstIsExpanded(isOpen)}\n          selected={firstSelected}\n          isOpen={firstIsExpanded}\n        &gt;\n          &lt;SelectList&gt;\n            {firstOptions.map((option, index) =&gt; (\n              &lt;SelectOption key={index} value={option}&gt;\n                {option}\n              &lt;/SelectOption&gt;\n            ))}\n          &lt;/SelectList&gt;\n        &lt;/Select&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Select\n          toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n            &lt;MenuToggle\n              ref={toggleRef}\n              onClick={() =&gt; onToggle(&#39;second&#39;)}\n              isExpanded={secondIsExpanded}\n              style={\n                {\n                  width: &#39;120px&#39;\n                } as React.CSSProperties\n              }\n            &gt;\n              {secondSelected || &#39;Second&#39;}\n            &lt;/MenuToggle&gt;\n          )}\n          onSelect={onSecondSelect}\n          selected={secondSelected}\n          onOpenChange={(isOpen) =&gt; setSecondIsExpanded(isOpen)}\n          isOpen={secondIsExpanded}\n        &gt;\n          &lt;SelectList&gt;\n            {secondOptions.map((option, index) =&gt; (\n              &lt;SelectOption key={index} value={option}&gt;\n                {option}\n              &lt;/SelectOption&gt;\n            ))}\n          &lt;/SelectList&gt;\n        &lt;/Select&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Select\n          toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n            &lt;MenuToggle\n              ref={toggleRef}\n              onClick={() =&gt; onToggle(&#39;third&#39;)}\n              isExpanded={thirdIsExpanded}\n              style={\n                {\n                  width: &#39;96px&#39;\n                } as React.CSSProperties\n              }\n            &gt;\n              {thirdSelected || &#39;Third&#39;}\n            &lt;/MenuToggle&gt;\n          )}\n          onSelect={onThirdSelect}\n          selected={thirdSelected}\n          onOpenChange={(isOpen) =&gt; setThirdIsExpanded(isOpen)}\n          isOpen={thirdIsExpanded}\n        &gt;\n          &lt;SelectList&gt;\n            {thirdOptions.map((option, index) =&gt; (\n              &lt;SelectOption key={index} value={option}&gt;\n                {option}\n              &lt;/SelectOption&gt;\n            ))}\n          &lt;/SelectList&gt;\n        &lt;/Select&gt;\n      &lt;/ToolbarItem&gt;\n    &lt;/Fragment&gt;\n  );\n\n  const iconButtonGroupItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;edit\&quot; icon={&lt;EditIcon /&gt;} /&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;clone\&quot; icon={&lt;CloneIcon /&gt;} /&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;sync\&quot; icon={&lt;SyncIcon /&gt;} /&gt;\n      &lt;/ToolbarItem&gt;\n    &lt;/Fragment&gt;\n  );\n\n  const buttonGroupItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Button variant=\&quot;primary\&quot;&gt;Action&lt;/Button&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Button variant=\&quot;secondary\&quot;&gt;Secondary&lt;/Button&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Button variant=\&quot;tertiary\&quot;&gt;Tertiary&lt;/Button&gt;\n      &lt;/ToolbarItem&gt;\n    &lt;/Fragment&gt;\n  );\n\n  const items = (\n    &lt;Fragment&gt;\n      &lt;ToolbarGroup variant=\&quot;filter-group\&quot;&gt;{filterGroupItems}&lt;/ToolbarGroup&gt;\n      &lt;ToolbarGroup variant=\&quot;action-group-plain\&quot;&gt;{iconButtonGroupItems}&lt;/ToolbarGroup&gt;\n      &lt;ToolbarGroup variant=\&quot;action-group\&quot;&gt;{buttonGroupItems}&lt;/ToolbarGroup&gt;\n    &lt;/Fragment&gt;\n  );\n\n  return (\n    &lt;Toolbar id=\&quot;toolbar-group-types\&quot;&gt;\n      &lt;ToolbarContent&gt;{items}&lt;/ToolbarContent&gt;\n    &lt;/Toolbar&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2952" data-pf-content="true" class="pf-v6-c-content--h3">Background color variants</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2971" data-pf-content="true" class="pf-v6-c-content--p">To change the background color of a toolbar, use the <code>colorVariant</code> property on the <code>&lt;Toolbar&gt;</code>.</p>
+<astro-island uid="i8odo" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment } from &#39;react&#39;;\nimport { Toolbar, ToolbarItem, ToolbarContent, Button, SearchInput } from &#39;@patternfly/react-core&#39;;\n\nexport const ToolbarColorVariant: React.FunctionComponent = () =&gt; (\n  &lt;Fragment&gt;\n    No background\n    &lt;Toolbar id=\&quot;toolbar-color-variant-no-background\&quot; colorVariant={&#39;no-background&#39;}&gt;\n      &lt;ToolbarContent&gt;\n        &lt;ToolbarItem&gt;\n          &lt;SearchInput aria-label=\&quot;No backtround variant example search input\&quot; /&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Action&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem variant=\&quot;separator\&quot; /&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;primary\&quot;&gt;Action&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarContent&gt;\n    &lt;/Toolbar&gt;\n    Primary background\n    &lt;Toolbar id=\&quot;toolbar-color-variant-primary\&quot; colorVariant={&#39;primary&#39;}&gt;\n      &lt;ToolbarContent&gt;\n        &lt;ToolbarItem&gt;\n          &lt;SearchInput aria-label=\&quot;Primary background variant example search input\&quot; /&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Action&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem variant=\&quot;separator\&quot; /&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;primary\&quot;&gt;Action&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarContent&gt;\n    &lt;/Toolbar&gt;\n    Secondary background\n    &lt;Toolbar id=\&quot;toolbar-color-variant-secondary\&quot; colorVariant={&#39;secondary&#39;}&gt;\n      &lt;ToolbarContent&gt;\n        &lt;ToolbarItem&gt;\n          &lt;SearchInput aria-label=\&quot;Secondary background variant example search input\&quot; /&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Action&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem variant=\&quot;separator\&quot; /&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;primary\&quot;&gt;Action&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarContent&gt;\n    &lt;/Toolbar&gt;\n  &lt;/Fragment&gt;\n);\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2953" data-pf-content="true" class="pf-v6-c-content--h2">Examples with toggle groups and filters</h2>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2954" data-pf-content="true" class="pf-v6-c-content--p">The following examples use toggle groups to allow for more responsive and complex toolbars with multiple items and groups of items. To visualize responsive toolbar behavior in the following examples, resize the browser to a smaller screen width.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2955" data-pf-content="true" class="pf-v6-c-content--h3">Component managed toggle groups</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2956" data-pf-content="true" class="pf-v6-c-content--p">A toggle group allows you to collapse a set of items into an overlay panel at a certain breakpoint. For example, when a toggle group contains filter controls, its contents will collapse into an overlay panel when the toolbar adapts to a change in the viewport size. The contents can be toggled by selecting the filter icon in the overlay panel.</p>
+<astro-island uid="ZcCRjQ" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  MenuToggle,\n  MenuToggleElement,\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  ToolbarToggleGroup,\n  ToolbarGroup,\n  SearchInput,\n  Select,\n  SelectList,\n  SelectOption\n} from &#39;@patternfly/react-core&#39;;\nimport FilterIcon from &#39;@patternfly/react-icons/dist/esm/icons/filter-icon&#39;;\n\nexport const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () =&gt; {\n  const [inputValue, setInputValue] = useState(&#39;&#39;);\n  const [statusIsExpanded, setStatusIsExpanded] = useState(false);\n  const [statusSelected, setStatusSelected] = useState(&#39;&#39;);\n  const [riskIsExpanded, setRiskIsExpanded] = useState(false);\n  const [riskSelected, setRiskSelected] = useState(&#39;&#39;);\n\n  const statusOptions = [&#39;New&#39;, &#39;Pending&#39;, &#39;Running&#39;, &#39;Cancelled&#39;];\n  const riskOptions = [&#39;Risk&#39;, &#39;Low&#39;, &#39;Medium&#39;, &#39;High&#39;];\n\n  const onInputChange = (newValue: string) =&gt; {\n    setInputValue(newValue);\n  };\n\n  const onStatusToggle = () =&gt; {\n    setStatusIsExpanded(!statusIsExpanded);\n  };\n\n  const onStatusSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, selection: string) =&gt; {\n    setStatusSelected(selection);\n    setStatusIsExpanded(false);\n  };\n\n  const onRiskToggle = () =&gt; {\n    setRiskIsExpanded(!riskIsExpanded);\n  };\n\n  const onRiskSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, selection: string) =&gt; {\n    setRiskSelected(selection);\n    setRiskIsExpanded(false);\n  };\n\n  const toggleGroupItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarItem&gt;\n        &lt;SearchInput\n          aria-label=\&quot;Component toggle groups example search input\&quot;\n          onChange={(_event, value) =&gt; onInputChange(value)}\n          value={inputValue}\n          onClear={() =&gt; {\n            onInputChange(&#39;&#39;);\n          }}\n        /&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarGroup variant=\&quot;filter-group\&quot;&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Select\n            toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n              &lt;MenuToggle\n                ref={toggleRef}\n                onClick={() =&gt; onStatusToggle()}\n                isExpanded={statusIsExpanded}\n                style={\n                  {\n                    width: &#39;150px&#39;\n                  } as React.CSSProperties\n                }\n              &gt;\n                {statusSelected || &#39;Status&#39;}\n              &lt;/MenuToggle&gt;\n            )}\n            onSelect={onStatusSelect}\n            onOpenChange={(isOpen) =&gt; setStatusIsExpanded(isOpen)}\n            selected={statusSelected}\n            isOpen={statusIsExpanded}\n          &gt;\n            &lt;SelectList&gt;\n              {statusOptions.map((option, index) =&gt; (\n                &lt;SelectOption key={index} value={option}&gt;\n                  {option}\n                &lt;/SelectOption&gt;\n              ))}\n            &lt;/SelectList&gt;\n          &lt;/Select&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Select\n            toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n              &lt;MenuToggle\n                ref={toggleRef}\n                onClick={() =&gt; onRiskToggle()}\n                isExpanded={riskIsExpanded}\n                style={\n                  {\n                    width: &#39;120px&#39;\n                  } as React.CSSProperties\n                }\n              &gt;\n                {riskSelected || &#39;Risk&#39;}\n              &lt;/MenuToggle&gt;\n            )}\n            onSelect={onRiskSelect}\n            selected={riskSelected}\n            isOpen={riskIsExpanded}\n            onOpenChange={(isOpen) =&gt; setRiskIsExpanded(isOpen)}\n          &gt;\n            &lt;SelectList&gt;\n              {riskOptions.map((option, index) =&gt; (\n                &lt;SelectOption key={index} value={option}&gt;\n                  {option}\n                &lt;/SelectOption&gt;\n              ))}\n            &lt;/SelectList&gt;\n          &lt;/Select&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n    &lt;/Fragment&gt;\n  );\n\n  const items = (\n    &lt;ToolbarToggleGroup toggleIcon={&lt;FilterIcon /&gt;} breakpoint=\&quot;xl\&quot;&gt;\n      {toggleGroupItems}\n    &lt;/ToolbarToggleGroup&gt;\n  );\n\n  return (\n    &lt;Toolbar id=\&quot;toolbar-component-managed-toggle-groups\&quot; className=\&quot;pf-m-toggle-group-container\&quot;&gt;\n      &lt;ToolbarContent&gt;{items}&lt;/ToolbarContent&gt;\n    &lt;/Toolbar&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2957" data-pf-content="true" class="pf-v6-c-content--h3">Consumer managed toggle groups</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2958" data-pf-content="true" class="pf-v6-c-content--p">To manually create the expanded state of the toggle group for smaller screen widths:</p>
+<ol data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2980" data-pf-content="true" class="pf-v6-c-content--ol">
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2972" data-pf-content="true" class="pf-v6-c-content--li">Add a <code>toggleIsExpanded</code> callback to the toolbar</li>
+<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2973" data-pf-content="true" class="pf-v6-c-content--li">Pass a boolean into the <code>isExpanded</code> property of the toolbar</li>
+</ol>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2959" data-pf-content="true" class="pf-v6-c-content--p">Note: The toggle group is aware of the consumer provided breakpoint, the expandable content is not. If the expandable content is expanded and the screen width surpasses that of the breakpoint, the expandable content is not aware of that and will remain open. Be sure to consider and handle this in your implementation.</p>
+<astro-island uid="ZU4v3N" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  MenuToggle,\n  MenuToggleElement,\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  ToolbarToggleGroup,\n  ToolbarGroup,\n  SearchInput,\n  Select,\n  SelectList,\n  SelectOption\n} from &#39;@patternfly/react-core&#39;;\nimport FilterIcon from &#39;@patternfly/react-icons/dist/esm/icons/filter-icon&#39;;\n\nexport const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () =&gt; {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [inputValue, setInputValue] = useState(&#39;&#39;);\n  const [statusIsExpanded, setStatusIsExpanded] = useState(false);\n  const [statusSelected, setStatusSelected] = useState(&#39;&#39;);\n  const [riskIsExpanded, setRiskIsExpanded] = useState(false);\n  const [riskSelected, setRiskSelected] = useState(&#39;&#39;);\n\n  const toggleIsExpanded = () =&gt; {\n    setIsExpanded(!isExpanded);\n  };\n\n  const statusOptions = [&#39;New&#39;, &#39;Pending&#39;, &#39;Running&#39;, &#39;Cancelled&#39;];\n  const riskOptions = [&#39;Risk&#39;, &#39;Low&#39;, &#39;Medium&#39;, &#39;High&#39;];\n\n  const onInputChange = (newValue: string) =&gt; {\n    setInputValue(newValue);\n  };\n\n  const onStatusToggle = () =&gt; {\n    setStatusIsExpanded(!statusIsExpanded);\n  };\n\n  const onStatusSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, selection: string) =&gt; {\n    setStatusSelected(selection);\n    setStatusIsExpanded(false);\n  };\n\n  const onRiskToggle = () =&gt; {\n    setRiskIsExpanded(!riskIsExpanded);\n  };\n\n  const onRiskSelect = (_event: React.MouseEvent&lt;Element, MouseEvent&gt; | undefined, selection: string) =&gt; {\n    setRiskSelected(selection);\n    setRiskIsExpanded(false);\n  };\n\n  const toggleGroupItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarItem&gt;\n        &lt;SearchInput\n          aria-label=\&quot;Consumer toggle groups example search input\&quot;\n          onChange={(_event, value) =&gt; onInputChange(value)}\n          value={inputValue}\n          onClear={() =&gt; {\n            onInputChange(&#39;&#39;);\n          }}\n        /&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarGroup variant=\&quot;filter-group\&quot;&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Select\n            toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n              &lt;MenuToggle\n                ref={toggleRef}\n                onClick={() =&gt; onStatusToggle()}\n                isExpanded={statusIsExpanded}\n                style={\n                  {\n                    width: &#39;150px&#39;\n                  } as React.CSSProperties\n                }\n              &gt;\n                {statusSelected || &#39;Status&#39;}\n              &lt;/MenuToggle&gt;\n            )}\n            onSelect={onStatusSelect}\n            onOpenChange={(isOpen) =&gt; setStatusIsExpanded(isOpen)}\n            selected={statusSelected}\n            isOpen={statusIsExpanded}\n          &gt;\n            &lt;SelectList&gt;\n              {statusOptions.map((option, index) =&gt; (\n                &lt;SelectOption key={index} value={option}&gt;\n                  {option}\n                &lt;/SelectOption&gt;\n              ))}\n            &lt;/SelectList&gt;\n          &lt;/Select&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Select\n            toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n              &lt;MenuToggle\n                ref={toggleRef}\n                onClick={() =&gt; onRiskToggle()}\n                isExpanded={riskIsExpanded}\n                style={\n                  {\n                    width: &#39;120px&#39;\n                  } as React.CSSProperties\n                }\n              &gt;\n                {riskSelected || &#39;Risk&#39;}\n              &lt;/MenuToggle&gt;\n            )}\n            onSelect={onRiskSelect}\n            selected={riskSelected}\n            isOpen={riskIsExpanded}\n            onOpenChange={(isOpen) =&gt; setRiskIsExpanded(isOpen)}\n          &gt;\n            &lt;SelectList&gt;\n              {riskOptions.map((option, index) =&gt; (\n                &lt;SelectOption key={index} value={option}&gt;\n                  {option}\n                &lt;/SelectOption&gt;\n              ))}\n            &lt;/SelectList&gt;\n          &lt;/Select&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n    &lt;/Fragment&gt;\n  );\n\n  const items = (\n    &lt;ToolbarToggleGroup toggleIcon={&lt;FilterIcon /&gt;} breakpoint=\&quot;xl\&quot;&gt;\n      {toggleGroupItems}\n    &lt;/ToolbarToggleGroup&gt;\n  );\n\n  return (\n    &lt;Toolbar\n      id=\&quot;toolbar-consumer-managed-toggle-groups\&quot;\n      isExpanded={isExpanded}\n      className=\&quot;pf-m-toggle-group-container\&quot;\n      toggleIsExpanded={toggleIsExpanded}\n    &gt;\n      &lt;ToolbarContent&gt;{items}&lt;/ToolbarContent&gt;\n    &lt;/Toolbar&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2960" data-pf-content="true" class="pf-v6-c-content--h3">With filters</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2961" data-pf-content="true" class="pf-v6-c-content--p">You can add filters to a toolbar to let users filter the content that a toolbar manages. When a toolbar is filtered, it will expand in height to make space for a row of filter labels and a “Clear all filters” button. Upon clearing the applied filters, the toolbar will return to its default height.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2974" data-pf-content="true" class="pf-v6-c-content--p">The <code>&lt;ToolbarFilter&gt;</code> component expects applied filters and a delete label handler to be passed in as properties. Pass in a <code>deleteLabelGroup</code> property to close the entire label group. Once close, the rendering of labels will be handled responsively by the toolbar.</p>
+<astro-island uid="2wmrqz" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Button,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  ToolbarFilter,\n  ToolbarToggleGroup,\n  ToolbarGroup,\n  Badge,\n  MenuToggle,\n  MenuToggleElement,\n  SearchInput,\n  Select,\n  SelectList,\n  SelectOption\n} from &#39;@patternfly/react-core&#39;;\nimport FilterIcon from &#39;@patternfly/react-icons/dist/esm/icons/filter-icon&#39;;\nimport EditIcon from &#39;@patternfly/react-icons/dist/esm/icons/edit-icon&#39;;\nimport CloneIcon from &#39;@patternfly/react-icons/dist/esm/icons/clone-icon&#39;;\nimport SyncIcon from &#39;@patternfly/react-icons/dist/esm/icons/sync-icon&#39;;\nimport EllipsisVIcon from &#39;@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon&#39;;\n\nexport const ToolbarWithFilters: React.FunctionComponent = () =&gt; {\n  const [inputValue, setInputValue] = useState(&#39;&#39;);\n  const [isStatusExpanded, setIsStatusExpanded] = useState(false);\n  const [isRiskExpanded, setIsRiskExpanded] = useState(false);\n  const [filters, setFilters] = useState({\n    risk: [&#39;Low&#39;],\n    status: [&#39;New&#39;, &#39;Pending&#39;]\n  });\n  const [isKebabOpen, setIsKebabOpen] = useState(false);\n\n  const onInputChange = (newValue: string) =&gt; {\n    setInputValue(newValue);\n  };\n\n  const onSelect = (type: string, event: React.MouseEvent | React.ChangeEvent, selection: string) =&gt; {\n    const checked = (event.target as HTMLInputElement).checked;\n    setFilters((prev) =&gt; {\n      const prevSelections = prev[type];\n      return {\n        ...prev,\n        [type]: checked ? [...prevSelections, selection] : prevSelections.filter((value) =&gt; value !== selection)\n      };\n    });\n  };\n\n  const onStatusSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string) =&gt; {\n    onSelect(&#39;status&#39;, event, selection);\n  };\n\n  const onRiskSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string) =&gt; {\n    onSelect(&#39;risk&#39;, event, selection);\n  };\n\n  const onDelete = (type: string, id: string) =&gt; {\n    if (type === &#39;Risk&#39;) {\n      setFilters({ risk: filters.risk.filter((fil: string) =&gt; fil !== id), status: filters.status });\n    } else if (type === &#39;Status&#39;) {\n      setFilters({ risk: filters.risk, status: filters.status.filter((fil: string) =&gt; fil !== id) });\n    } else {\n      setFilters({ risk: [], status: [] });\n    }\n  };\n\n  const onDeleteGroup = (type: string) =&gt; {\n    if (type === &#39;Risk&#39;) {\n      setFilters({ risk: [], status: filters.status });\n    } else if (type === &#39;Status&#39;) {\n      setFilters({ risk: filters.risk, status: [] });\n    }\n  };\n\n  const onStatusToggle = () =&gt; {\n    setIsStatusExpanded(!isStatusExpanded);\n  };\n\n  const onRiskToggle = () =&gt; {\n    setIsRiskExpanded(!isRiskExpanded);\n  };\n\n  const onKebabToggle = () =&gt; {\n    setIsKebabOpen(!isKebabOpen);\n  };\n\n  const statusMenuItems = (\n    &lt;SelectList&gt;\n      &lt;SelectOption hasCheckbox key=\&quot;statusNew\&quot; value=\&quot;New\&quot; isSelected={filters.status.includes(&#39;New&#39;)}&gt;\n        New\n      &lt;/SelectOption&gt;\n      &lt;SelectOption hasCheckbox key=\&quot;statusPending\&quot; value=\&quot;Pending\&quot; isSelected={filters.status.includes(&#39;Pending&#39;)}&gt;\n        Pending\n      &lt;/SelectOption&gt;\n      &lt;SelectOption hasCheckbox key=\&quot;statusRunning\&quot; value=\&quot;Running\&quot; isSelected={filters.status.includes(&#39;Running&#39;)}&gt;\n        Running\n      &lt;/SelectOption&gt;\n      &lt;SelectOption\n        hasCheckbox\n        key=\&quot;statusCancelled\&quot;\n        value=\&quot;Cancelled\&quot;\n        isSelected={filters.status.includes(&#39;Cancelled&#39;)}\n      &gt;\n        Cancelled\n      &lt;/SelectOption&gt;\n    &lt;/SelectList&gt;\n  );\n\n  const riskMenuItems = (\n    &lt;SelectList&gt;\n      &lt;SelectOption hasCheckbox key=\&quot;riskLow\&quot; value=\&quot;Low\&quot; isSelected={filters.risk.includes(&#39;Low&#39;)}&gt;\n        Low\n      &lt;/SelectOption&gt;\n      &lt;SelectOption hasCheckbox key=\&quot;riskMedium\&quot; value=\&quot;Medium\&quot; isSelected={filters.risk.includes(&#39;Medium&#39;)}&gt;\n        Medium\n      &lt;/SelectOption&gt;\n      &lt;SelectOption hasCheckbox key=\&quot;riskHigh\&quot; value=\&quot;High\&quot; isSelected={filters.risk.includes(&#39;High&#39;)}&gt;\n        High\n      &lt;/SelectOption&gt;\n    &lt;/SelectList&gt;\n  );\n\n  const toggleGroupItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarItem&gt;\n        &lt;SearchInput\n          aria-label=\&quot;With filters example search input\&quot;\n          onChange={(_event, value) =&gt; onInputChange(value)}\n          value={inputValue}\n          onClear={() =&gt; {\n            onInputChange(&#39;&#39;);\n          }}\n        /&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarGroup variant=\&quot;filter-group\&quot;&gt;\n        &lt;ToolbarFilter\n          labels={filters.status}\n          deleteLabel={(category, label) =&gt; onDelete(category as string, label as string)}\n          deleteLabelGroup={(category) =&gt; onDeleteGroup(category as string)}\n          categoryName=\&quot;Status\&quot;\n        &gt;\n          &lt;Select\n            aria-label=\&quot;Status\&quot;\n            role=\&quot;menu\&quot;\n            toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n              &lt;MenuToggle\n                ref={toggleRef}\n                onClick={onStatusToggle}\n                isExpanded={isStatusExpanded}\n                style={\n                  {\n                    width: &#39;140px&#39;\n                  } as React.CSSProperties\n                }\n              &gt;\n                Status\n                {filters.status.length &gt; 0 &amp;&amp; &lt;Badge isRead&gt;{filters.status.length}&lt;/Badge&gt;}\n              &lt;/MenuToggle&gt;\n            )}\n            onSelect={onStatusSelect}\n            selected={filters.status}\n            isOpen={isStatusExpanded}\n            onOpenChange={(isOpen) =&gt; setIsStatusExpanded(isOpen)}\n          &gt;\n            {statusMenuItems}\n          &lt;/Select&gt;\n        &lt;/ToolbarFilter&gt;\n        &lt;ToolbarFilter\n          labels={filters.risk}\n          deleteLabel={(category, label) =&gt; onDelete(category as string, label as string)}\n          categoryName=\&quot;Risk\&quot;\n        &gt;\n          &lt;Select\n            aria-label=\&quot;Risk\&quot;\n            role=\&quot;menu\&quot;\n            toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n              &lt;MenuToggle\n                ref={toggleRef}\n                onClick={onRiskToggle}\n                isExpanded={isRiskExpanded}\n                style={\n                  {\n                    width: &#39;140px&#39;\n                  } as React.CSSProperties\n                }\n              &gt;\n                Risk\n                {filters.risk.length &gt; 0 &amp;&amp; &lt;Badge isRead&gt;{filters.risk.length}&lt;/Badge&gt;}\n              &lt;/MenuToggle&gt;\n            )}\n            onSelect={onRiskSelect}\n            selected={filters.risk}\n            isOpen={isRiskExpanded}\n            onOpenChange={(isOpen) =&gt; setIsRiskExpanded(isOpen)}\n          &gt;\n            {riskMenuItems}\n          &lt;/Select&gt;\n        &lt;/ToolbarFilter&gt;\n      &lt;/ToolbarGroup&gt;\n    &lt;/Fragment&gt;\n  );\n\n  const toolbarItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarToggleGroup toggleIcon={&lt;FilterIcon /&gt;} breakpoint=\&quot;xl\&quot;&gt;\n        {toggleGroupItems}\n      &lt;/ToolbarToggleGroup&gt;\n      &lt;ToolbarGroup variant=\&quot;action-group-plain\&quot;&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;edit\&quot; icon={&lt;EditIcon /&gt;} /&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;clone\&quot; icon={&lt;CloneIcon /&gt;} /&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;sync\&quot; icon={&lt;SyncIcon /&gt;} /&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Dropdown\n          popperProps={{ position: &#39;right&#39; }}\n          isOpen={isKebabOpen}\n          onOpenChange={(isOpen: boolean) =&gt; setIsKebabOpen(isOpen)}\n          toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n            &lt;MenuToggle\n              ref={toggleRef}\n              isExpanded={isKebabOpen}\n              onClick={onKebabToggle}\n              variant=\&quot;plain\&quot;\n              aria-label=\&quot;Toolbar with filters example kebab toggle\&quot;\n              icon={&lt;EllipsisVIcon /&gt;}\n            /&gt;\n          )}\n        &gt;\n          &lt;DropdownList&gt;\n            &lt;DropdownItem&gt;Action&lt;/DropdownItem&gt;\n            &lt;DropdownItem\n              to=\&quot;#default-link2\&quot;\n              // Prevent the default onClick functionality for example purposes\n              onClick={(ev: any) =&gt; ev.preventDefault()}\n            &gt;\n              Link\n            &lt;/DropdownItem&gt;\n            &lt;DropdownItem isDisabled&gt;Disabled Action&lt;/DropdownItem&gt;\n            &lt;DropdownItem isDisabled to=\&quot;#default-link4\&quot;&gt;\n              Disabled Link\n            &lt;/DropdownItem&gt;\n          &lt;/DropdownList&gt;\n        &lt;/Dropdown&gt;\n      &lt;/ToolbarItem&gt;\n    &lt;/Fragment&gt;\n  );\n\n  return (\n    &lt;Toolbar\n      id=\&quot;toolbar-with-filter\&quot;\n      className=\&quot;pf-m-toggle-group-container\&quot;\n      collapseListedFiltersBreakpoint=\&quot;xl\&quot;\n      clearAllFilters={() =&gt; onDelete(&#39;&#39;, &#39;&#39;)}\n    &gt;\n      &lt;ToolbarContent&gt;{toolbarItems}&lt;/ToolbarContent&gt;\n    &lt;/Toolbar&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2962" data-pf-content="true" class="pf-v6-c-content--h3">With custom label group content</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2975" data-pf-content="true" class="pf-v6-c-content--p">To customize the label groups generated by toolbar filters, use the <code>customLabelGroupContent</code> property on the <code>&lt;Toolbar&gt;</code>. This property will remove the default <code>clear all filters</code> button.</p>
+<astro-island uid="Z2rNfaj" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  ToolbarFilter,\n  ToolbarToggleGroup,\n  ToolbarGroup,\n  Badge,\n  Button,\n  MenuToggle,\n  MenuToggleElement,\n  Select,\n  SelectList,\n  SelectOption\n} from &#39;@patternfly/react-core&#39;;\nimport FilterIcon from &#39;@patternfly/react-icons/dist/esm/icons/filter-icon&#39;;\nimport EditIcon from &#39;@patternfly/react-icons/dist/esm/icons/edit-icon&#39;;\nimport CloneIcon from &#39;@patternfly/react-icons/dist/esm/icons/clone-icon&#39;;\nimport SyncIcon from &#39;@patternfly/react-icons/dist/esm/icons/sync-icon&#39;;\n\nexport const ToolbarCustomLabelGroupContent: React.FunctionComponent = () =&gt; {\n  const [statusIsExpanded, setStatusIsExpanded] = useState&lt;boolean&gt;(false);\n  const [riskIsExpanded, setRiskIsExpanded] = useState&lt;boolean&gt;(false);\n  const [filters, setFilters] = useState({\n    risk: [&#39;Low&#39;],\n    status: [&#39;New&#39;, &#39;Pending&#39;]\n  });\n\n  const onDelete = (type: string, id: string) =&gt; {\n    if (type === &#39;Risk&#39;) {\n      setFilters({ risk: filters.risk.filter((fil: string) =&gt; fil !== id), status: filters.status });\n    } else if (type === &#39;Status&#39;) {\n      setFilters({ risk: filters.risk, status: filters.status.filter((fil: string) =&gt; fil !== id) });\n    } else {\n      setFilters({ risk: [], status: [] });\n    }\n  };\n\n  const onDeleteGroup = (type: string) =&gt; {\n    if (type === &#39;Risk&#39;) {\n      setFilters({ risk: [], status: filters.status });\n    } else if (type === &#39;Status&#39;) {\n      setFilters({ risk: filters.risk, status: [] });\n    }\n  };\n\n  const onSelect = (type: &#39;Risk&#39; | &#39;Status&#39;, event: React.MouseEvent | React.ChangeEvent, selection: string) =&gt; {\n    const checked = (event.target as any).checked;\n    if (type === &#39;Risk&#39;) {\n      setFilters({\n        risk: checked ? [...filters.risk, selection] : filters.risk.filter((fil: string) =&gt; fil !== selection),\n        status: filters.status\n      });\n    } else if (type === &#39;Status&#39;) {\n      setFilters({\n        risk: filters.risk,\n        status: checked ? [...filters.status, selection] : filters.status.filter((fil: string) =&gt; fil !== selection)\n      });\n    }\n  };\n\n  const statusMenuItems = (\n    &lt;SelectList&gt;\n      &lt;SelectOption hasCheckbox key=\&quot;statusNew\&quot; value=\&quot;New\&quot; isSelected={filters.status.includes(&#39;New&#39;)}&gt;\n        New\n      &lt;/SelectOption&gt;\n      &lt;SelectOption hasCheckbox key=\&quot;statusPending\&quot; value=\&quot;Pending\&quot; isSelected={filters.status.includes(&#39;Pending&#39;)}&gt;\n        Pending\n      &lt;/SelectOption&gt;\n      &lt;SelectOption hasCheckbox key=\&quot;statusRunning\&quot; value=\&quot;Running\&quot; isSelected={filters.status.includes(&#39;Running&#39;)}&gt;\n        Running\n      &lt;/SelectOption&gt;\n      &lt;SelectOption\n        hasCheckbox\n        key=\&quot;statusCancelled\&quot;\n        value=\&quot;Cancelled\&quot;\n        isSelected={filters.status.includes(&#39;Cancelled&#39;)}\n      &gt;\n        Cancelled\n      &lt;/SelectOption&gt;\n    &lt;/SelectList&gt;\n  );\n\n  const riskMenuItems = (\n    &lt;SelectList&gt;\n      &lt;SelectOption hasCheckbox key=\&quot;riskLow\&quot; value=\&quot;Low\&quot; isSelected={filters.risk.includes(&#39;Low&#39;)}&gt;\n        Low\n      &lt;/SelectOption&gt;\n      &lt;SelectOption hasCheckbox key=\&quot;riskMedium\&quot; value=\&quot;Medium\&quot; isSelected={filters.risk.includes(&#39;Medium&#39;)}&gt;\n        Medium\n      &lt;/SelectOption&gt;\n      &lt;SelectOption hasCheckbox key=\&quot;riskHigh\&quot; value=\&quot;High\&quot; isSelected={filters.risk.includes(&#39;High&#39;)}&gt;\n        High\n      &lt;/SelectOption&gt;\n    &lt;/SelectList&gt;\n  );\n\n  const toggleGroupItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarGroup variant=\&quot;filter-group\&quot;&gt;\n        &lt;ToolbarFilter\n          labels={filters.status}\n          deleteLabel={(category, label) =&gt; onDelete(category as string, label as string)}\n          deleteLabelGroup={(category) =&gt; onDeleteGroup(category as string)}\n          categoryName=\&quot;Status\&quot;\n        &gt;\n          &lt;Select\n            aria-label=\&quot;Status\&quot;\n            role=\&quot;menu\&quot;\n            toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n              &lt;MenuToggle\n                ref={toggleRef}\n                onClick={() =&gt; setStatusIsExpanded(!statusIsExpanded)}\n                isExpanded={statusIsExpanded}\n                style={\n                  {\n                    width: &#39;140px&#39;\n                  } as React.CSSProperties\n                }\n              &gt;\n                Status\n                {filters.status.length &gt; 0 &amp;&amp; &lt;Badge isRead&gt;{filters.status.length}&lt;/Badge&gt;}\n              &lt;/MenuToggle&gt;\n            )}\n            onSelect={(event, selection) =&gt; onSelect(&#39;Status&#39;, event, selection as string)}\n            selected={filters.status}\n            isOpen={statusIsExpanded}\n            onOpenChange={(isOpen) =&gt; setStatusIsExpanded(isOpen)}\n          &gt;\n            {statusMenuItems}\n          &lt;/Select&gt;\n        &lt;/ToolbarFilter&gt;\n        &lt;ToolbarFilter\n          labels={filters.risk}\n          deleteLabel={(category, label) =&gt; onDelete(category as string, label as string)}\n          deleteLabelGroup={(category) =&gt; onDeleteGroup(category as string)}\n          categoryName=\&quot;Risk\&quot;\n        &gt;\n          &lt;Select\n            aria-label=\&quot;Risk\&quot;\n            role=\&quot;menu\&quot;\n            toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n              &lt;MenuToggle\n                ref={toggleRef}\n                onClick={() =&gt; setRiskIsExpanded(!riskIsExpanded)}\n                isExpanded={riskIsExpanded}\n                style={\n                  {\n                    width: &#39;140px&#39;\n                  } as React.CSSProperties\n                }\n              &gt;\n                Risk\n                {filters.risk.length &gt; 0 &amp;&amp; &lt;Badge isRead&gt;{filters.risk.length}&lt;/Badge&gt;}\n              &lt;/MenuToggle&gt;\n            )}\n            onSelect={(event, selection) =&gt; onSelect(&#39;Risk&#39;, event, selection as string)}\n            selected={filters.risk}\n            isOpen={riskIsExpanded}\n            onOpenChange={(isOpen) =&gt; setRiskIsExpanded(isOpen)}\n          &gt;\n            {riskMenuItems}\n          &lt;/Select&gt;\n        &lt;/ToolbarFilter&gt;\n      &lt;/ToolbarGroup&gt;\n    &lt;/Fragment&gt;\n  );\n\n  const toolbarItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarToggleGroup toggleIcon={&lt;FilterIcon /&gt;} breakpoint=\&quot;xl\&quot;&gt;\n        {toggleGroupItems}\n      &lt;/ToolbarToggleGroup&gt;\n      &lt;ToolbarGroup variant=\&quot;action-group-plain\&quot;&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;edit\&quot; icon={&lt;EditIcon /&gt;} /&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;clone\&quot; icon={&lt;CloneIcon /&gt;} /&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;sync\&quot; icon={&lt;SyncIcon /&gt;} /&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n    &lt;/Fragment&gt;\n  );\n\n  const customLabelGroupContent = (\n    &lt;Fragment&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Button variant=\&quot;link\&quot; onClick={() =&gt; {}} isInline&gt;\n          Save filters\n        &lt;/Button&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Button variant=\&quot;link\&quot; onClick={() =&gt; onDelete(&#39;&#39;, &#39;&#39;)} isInline&gt;\n          Clear all filters\n        &lt;/Button&gt;\n      &lt;/ToolbarItem&gt;\n    &lt;/Fragment&gt;\n  );\n\n  return (\n    &lt;Toolbar\n      id=\&quot;toolbar-with-custom-label-group\&quot;\n      className=\&quot;pf-m-toggle-group-container\&quot;\n      collapseListedFiltersBreakpoint=\&quot;xl\&quot;\n      customLabelGroupContent={customLabelGroupContent}\n    &gt;\n      &lt;ToolbarContent&gt;{toolbarItems}&lt;/ToolbarContent&gt;\n    &lt;/Toolbar&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2963" data-pf-content="true" class="pf-v6-c-content--h3">Stacked example</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2964" data-pf-content="true" class="pf-v6-c-content--p">When all of a toolbar’s required elements cannot fit in a single line, you can split toolbar items into multiple rows.</p>
+<astro-island uid="Z1Q09RP" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Button,\n  ButtonVariant,\n  Select,\n  SelectList,\n  SelectOption,\n  Pagination,\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  Divider,\n  MenuToggle,\n  MenuToggleCheckbox,\n  MenuToggleElement,\n  OverflowMenu,\n  OverflowMenuContent,\n  OverflowMenuControl,\n  OverflowMenuGroup,\n  OverflowMenuItem,\n  Toolbar,\n  ToolbarContent,\n  ToolbarToggleGroup,\n  ToolbarItem\n} from &#39;@patternfly/react-core&#39;;\nimport FilterIcon from &#39;@patternfly/react-icons/dist/esm/icons/filter-icon&#39;;\nimport EllipsisVIcon from &#39;@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon&#39;;\n\nexport const ToolbarStacked: React.FunctionComponent = () =&gt; {\n  // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned\n  // pagination - right aligned\n  const resourceOptions = [&#39;All resources&#39;, &#39;Deployment&#39;, &#39;Pod&#39;];\n  const statusOptions = [&#39;New&#39;, &#39;Pending&#39;, &#39;Running&#39;, &#39;Cancelled&#39;];\n\n  const [kebabIsOpen, setKebabIsOpen] = useState(false);\n  const [resourceIsExpanded, setResourceIsExpanded] = useState(false);\n  const [resourceSelected, setResourceSelected] = useState(&#39;&#39;);\n  const [statusIsExpanded, setStatusIsExpanded] = useState(false);\n  const [statusSelected, setStatusSelected] = useState(&#39;&#39;);\n  const [isSplitButtonDropdownOpen, setIsSplitButtonDropdownOpen] = useState(false);\n  const [page, setPage] = useState(1);\n  const [perPage, setPerPage] = useState(20);\n\n  const onKebabToggle = () =&gt; {\n    setKebabIsOpen(!kebabIsOpen);\n  };\n\n  const onResourceToggle = () =&gt; {\n    setResourceIsExpanded(!resourceIsExpanded);\n  };\n\n  const onResourceSelect = (_event: React.ChangeEvent | React.MouseEvent, selection: string) =&gt; {\n    setResourceSelected(selection);\n    setResourceIsExpanded(false);\n  };\n\n  const onResourceSelectDropdown = () =&gt; {\n    setResourceIsExpanded(false);\n  };\n\n  const onStatusToggle = () =&gt; {\n    setStatusIsExpanded(!statusIsExpanded);\n  };\n\n  const onStatusSelect = (_event: React.ChangeEvent | React.MouseEvent, selection: string) =&gt; {\n    setStatusSelected(selection);\n    setStatusIsExpanded(false);\n  };\n\n  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, pageNumber: number) =&gt; {\n    setPage(pageNumber);\n  };\n\n  const onPerPageSelect = (\n    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    perPage: number,\n    page: number\n  ) =&gt; {\n    setPage(page);\n    setPerPage(perPage);\n  };\n\n  const onSplitButtonToggle = () =&gt; {\n    setIsSplitButtonDropdownOpen(!isSplitButtonDropdownOpen);\n  };\n\n  const onSplitButtonSelect = () =&gt; {\n    setIsSplitButtonDropdownOpen(!isSplitButtonDropdownOpen);\n  };\n\n  const dropdownItems = (\n    &lt;&gt;\n      &lt;DropdownItem&gt;Action&lt;/DropdownItem&gt;\n      &lt;DropdownItem\n        to=\&quot;#default-link2\&quot;\n        // Prevent the default onClick functionality for example purposes\n        onClick={(ev: any) =&gt; ev.preventDefault()}\n      &gt;\n        Link\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem isDisabled&gt;Disabled Action&lt;/DropdownItem&gt;\n      &lt;DropdownItem isDisabled to=\&quot;#default-link4\&quot;&gt;\n        Disabled Link\n      &lt;/DropdownItem&gt;\n    &lt;/&gt;\n  );\n  const splitButtonDropdownItems = (\n    &lt;&gt;\n      &lt;DropdownItem value={0} key=\&quot;action\&quot;&gt;\n        Action\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem\n        value={1}\n        key=\&quot;link\&quot;\n        to=\&quot;#default-link2\&quot;\n        // Prevent the default onClick functionality for example purposes\n        onClick={(ev: any) =&gt; ev.preventDefault()}\n      &gt;\n        Link\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem value={2} isDisabled key=\&quot;disabled action\&quot;&gt;\n        Disabled Action\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem value={3} isDisabled key=\&quot;disabled link\&quot; to=\&quot;#default-link4\&quot;&gt;\n        Disabled Link\n      &lt;/DropdownItem&gt;\n    &lt;/&gt;\n  );\n\n  const toggleGroupItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarItem variant=\&quot;label\&quot; id=\&quot;stacked-example-resource-select\&quot;&gt;\n        Resource\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Select\n          toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n            &lt;MenuToggle\n              ref={toggleRef}\n              onClick={() =&gt; onResourceToggle()}\n              isExpanded={resourceIsExpanded}\n              style={\n                {\n                  width: &#39;150px&#39;\n                } as React.CSSProperties\n              }\n            &gt;\n              {resourceSelected || &#39;Resource&#39;}\n            &lt;/MenuToggle&gt;\n          )}\n          onSelect={onResourceSelect}\n          selected={resourceSelected}\n          onOpenChange={(isOpen) =&gt; setResourceIsExpanded(isOpen)}\n          isOpen={resourceIsExpanded}\n          aria-labelledby=\&quot;stacked-example-resource-select\&quot;\n        &gt;\n          &lt;SelectList&gt;\n            {resourceOptions.map((option, index) =&gt; (\n              &lt;SelectOption key={index} value={option}&gt;\n                {option}\n              &lt;/SelectOption&gt;\n            ))}\n          &lt;/SelectList&gt;\n        &lt;/Select&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem variant=\&quot;label\&quot; id=\&quot;stacked-example-status-select\&quot;&gt;\n        Status\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Select\n          toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n            &lt;MenuToggle\n              ref={toggleRef}\n              onClick={() =&gt; onStatusToggle()}\n              isExpanded={statusIsExpanded}\n              style={\n                {\n                  width: &#39;150px&#39;\n                } as React.CSSProperties\n              }\n            &gt;\n              {statusSelected || &#39;Status&#39;}\n            &lt;/MenuToggle&gt;\n          )}\n          onSelect={onStatusSelect}\n          onOpenChange={(isOpen) =&gt; setStatusIsExpanded(isOpen)}\n          selected={statusSelected}\n          isOpen={statusIsExpanded}\n        &gt;\n          &lt;SelectList&gt;\n            {statusOptions.map((option, index) =&gt; (\n              &lt;SelectOption key={index} value={option}&gt;\n                {option}\n              &lt;/SelectOption&gt;\n            ))}\n          &lt;/SelectList&gt;\n        &lt;/Select&gt;\n      &lt;/ToolbarItem&gt;\n    &lt;/Fragment&gt;\n  );\n\n  const firstRowItems = (\n    &lt;Fragment&gt;\n      &lt;Toolbar&gt;\n        &lt;ToolbarContent&gt;\n          &lt;ToolbarToggleGroup variant=\&quot;label-group\&quot; toggleIcon={&lt;FilterIcon /&gt;} breakpoint=\&quot;lg\&quot;&gt;\n            {toggleGroupItems}\n          &lt;/ToolbarToggleGroup&gt;\n          &lt;ToolbarItem&gt;\n            &lt;OverflowMenu breakpoint=\&quot;xl\&quot;&gt;\n              &lt;OverflowMenuContent&gt;\n                &lt;OverflowMenuGroup groupType=\&quot;button\&quot;&gt;\n                  &lt;OverflowMenuItem&gt;\n                    &lt;Button variant={ButtonVariant.primary}&gt;Primary&lt;/Button&gt;\n                  &lt;/OverflowMenuItem&gt;\n                  &lt;OverflowMenuItem&gt;\n                    &lt;Button variant={ButtonVariant.secondary}&gt;Secondary&lt;/Button&gt;\n                  &lt;/OverflowMenuItem&gt;\n                &lt;/OverflowMenuGroup&gt;\n              &lt;/OverflowMenuContent&gt;\n              &lt;OverflowMenuControl hasAdditionalOptions&gt;\n                &lt;Dropdown\n                  onSelect={onResourceSelectDropdown}\n                  onOpenChange={(isOpen: boolean) =&gt; setKebabIsOpen(isOpen)}\n                  toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                    &lt;MenuToggle\n                      ref={toggleRef}\n                      aria-label=\&quot;Kebab overflow menu\&quot;\n                      variant=\&quot;plain\&quot;\n                      onClick={onKebabToggle}\n                      isExpanded={kebabIsOpen}\n                      icon={&lt;EllipsisVIcon /&gt;}\n                    /&gt;\n                  )}\n                  isOpen={kebabIsOpen}\n                &gt;\n                  &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n                &lt;/Dropdown&gt;\n              &lt;/OverflowMenuControl&gt;\n            &lt;/OverflowMenu&gt;\n          &lt;/ToolbarItem&gt;\n        &lt;/ToolbarContent&gt;\n      &lt;/Toolbar&gt;\n    &lt;/Fragment&gt;\n  );\n\n  const secondRowItems = (\n    &lt;Fragment&gt;\n      &lt;Toolbar&gt;\n        &lt;ToolbarContent&gt;\n          &lt;ToolbarItem&gt;\n            &lt;Dropdown\n              onSelect={onSplitButtonSelect}\n              isOpen={isSplitButtonDropdownOpen}\n              onOpenChange={(isOpen: boolean) =&gt; setIsSplitButtonDropdownOpen(isOpen)}\n              toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                &lt;MenuToggle\n                  ref={toggleRef}\n                  isExpanded={isSplitButtonDropdownOpen}\n                  onClick={onSplitButtonToggle}\n                  aria-label=\&quot;Toolbar stacked example split toggle\&quot;\n                  splitButtonItems={[\n                    &lt;MenuToggleCheckbox\n                      key=\&quot;toolbar-stacked-split-button-checkbox-1\&quot;\n                      id=\&quot;toolbar-stacked-split-button-checkbox-1\&quot;\n                      aria-label=\&quot;Select all\&quot;\n                    /&gt;\n                  ]}\n                /&gt;\n              )}\n            &gt;\n              &lt;DropdownList&gt;{splitButtonDropdownItems}&lt;/DropdownList&gt;\n            &lt;/Dropdown&gt;\n          &lt;/ToolbarItem&gt;\n          &lt;ToolbarItem variant=\&quot;pagination\&quot; align={{ default: &#39;alignEnd&#39; }}&gt;\n            &lt;Pagination\n              itemCount={37}\n              perPage={perPage}\n              page={page}\n              onSetPage={onSetPage}\n              widgetId=\&quot;pagination-options-menu-top\&quot;\n              onPerPageSelect={onPerPageSelect}\n            /&gt;\n          &lt;/ToolbarItem&gt;\n        &lt;/ToolbarContent&gt;\n      &lt;/Toolbar&gt;\n    &lt;/Fragment&gt;\n  );\n\n  return (\n    &lt;Fragment&gt;\n      {firstRowItems}\n      &lt;Divider /&gt;\n      {secondRowItems}\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2965" data-pf-content="true" class="pf-v6-c-content--h2">Examples with spacers and wrapping</h2>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2966" data-pf-content="true" class="pf-v6-c-content--p">You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2976" data-pf-content="true" class="pf-v6-c-content--p">Items are spaced “16px” apart by default and can be modified by changing their or their parents’ <code>gap</code>, <code>columnGap</code>, and <code>rowGap</code> properties. You can set the property values at multiple breakpoints, including “default”, “md”, “lg”, “xl”, and “2xl”.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2967" data-pf-content="true" class="pf-v6-c-content--h3">Toolbar content wrapping</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2977" data-pf-content="true" class="pf-v6-c-content--p">The toolbar content section will wrap by default, but you can set the <code>rowRap</code> property to <code>noWrap</code> to make it not wrap.</p>
+<astro-island uid="Z1qx6vz" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment } from &#39;react&#39;;\nimport { Toolbar, ToolbarItem, ToolbarContent } from &#39;@patternfly/react-core&#39;;\nimport { Button, SearchInput } from &#39;@patternfly/react-core&#39;;\n\nexport const ToolbarItems: React.FunctionComponent = () =&gt; {\n  const items = (\n    &lt;Fragment&gt;\n      &lt;ToolbarItem&gt;\n        &lt;SearchInput aria-label=\&quot;Items example search input\&quot; /&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Button variant=\&quot;secondary\&quot;&gt;Action&lt;/Button&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Button variant=\&quot;secondary\&quot;&gt;Action&lt;/Button&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Button variant=\&quot;secondary\&quot;&gt;Action&lt;/Button&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Button variant=\&quot;secondary\&quot;&gt;Action&lt;/Button&gt;\n      &lt;/ToolbarItem&gt;\n      &lt;ToolbarItem variant=\&quot;separator\&quot; /&gt;\n      &lt;ToolbarItem&gt;\n        &lt;Button variant=\&quot;primary\&quot;&gt;Action&lt;/Button&gt;\n      &lt;/ToolbarItem&gt;\n    &lt;/Fragment&gt;\n  );\n\n  return (\n    &lt;Toolbar id=\&quot;toolbar-items-example\&quot;&gt;\n      &lt;ToolbarContent rowWrap={{ default: &#39;nowrap&#39; }}&gt;{items}&lt;/ToolbarContent&gt;\n    &lt;/Toolbar&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2968" data-pf-content="true" class="pf-v6-c-content--h3">Toolbar group spacers</h3>
+<astro-island uid="Z2rvAMg" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment } from &#39;react&#39;;\nimport { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from &#39;@patternfly/react-core&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\n\nexport const ToolbarGroupSpacers: React.FunctionComponent = () =&gt; {\n  const groupGapItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarGroup&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Default Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Default Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n      &lt;ToolbarItem variant=\&quot;separator\&quot;&gt;&lt;/ToolbarItem&gt;\n      &lt;ToolbarGroup gap={{ default: &#39;gapNone&#39; }}&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n      &lt;ToolbarItem variant=\&quot;separator\&quot;&gt;&lt;/ToolbarItem&gt;\n      &lt;ToolbarGroup gap={{ default: &#39;gapSm&#39; }}&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n      &lt;ToolbarItem variant=\&quot;separator\&quot;&gt;&lt;/ToolbarItem&gt;\n      &lt;ToolbarGroup gap={{ default: &#39;gapXl&#39; }}&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n    &lt;/Fragment&gt;\n  );\n\n  const groupColumnGapItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarGroup columnGap={{ default: &#39;columnGapNone&#39; }}&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Column Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Column Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n      &lt;ToolbarItem variant=\&quot;separator\&quot;&gt;&lt;/ToolbarItem&gt;\n      &lt;ToolbarGroup columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Column Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Column Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n      &lt;ToolbarItem variant=\&quot;separator\&quot;&gt;&lt;/ToolbarItem&gt;\n      &lt;ToolbarGroup columnGap={{ default: &#39;columnGapXl&#39; }}&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Column Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Column Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n    &lt;/Fragment&gt;\n  );\n\n  const groupRowGapItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarGroup rowGap={{ default: &#39;rowGapNone&#39; }} rowWrap={{ default: &#39;wrap&#39; }}&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem variant=\&quot;separator\&quot;&gt;&lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n      &lt;ToolbarGroup rowGap={{ default: &#39;rowGapSm&#39; }} rowWrap={{ default: &#39;wrap&#39; }}&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem variant=\&quot;separator\&quot;&gt;&lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n      &lt;ToolbarGroup rowGap={{ default: &#39;rowGapXl&#39; }} rowWrap={{ default: &#39;wrap&#39; }}&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n    &lt;/Fragment&gt;\n  );\n\n  return (\n    &lt;&gt;\n      Using gap\n      &lt;br /&gt;\n      &lt;br /&gt;\n      &lt;Toolbar id=\&quot;toolbar-spacers\&quot;&gt;\n        &lt;ToolbarContent&gt;{groupGapItems}&lt;/ToolbarContent&gt;\n      &lt;/Toolbar&gt;\n      Using column gap\n      &lt;br /&gt;\n      &lt;br /&gt;\n      &lt;Toolbar id=\&quot;toolbar-spacers\&quot;&gt;\n        &lt;ToolbarContent&gt;{groupColumnGapItems}&lt;/ToolbarContent&gt;\n      &lt;/Toolbar&gt;\n      Using row gap\n      &lt;br /&gt;\n      &lt;br /&gt;\n      &lt;Toolbar id=\&quot;toolbar-spacers\&quot;&gt;\n        &lt;ToolbarContent&gt;{groupRowGapItems}&lt;/ToolbarContent&gt;\n      &lt;/Toolbar&gt;\n      &lt;br /&gt;\n    &lt;/&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2969" data-pf-content="true" class="pf-v6-c-content--h3">Toolbar item spacers</h3>
+<astro-island uid="Z1MEFe9" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment } from &#39;react&#39;;\nimport { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from &#39;@patternfly/react-core&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\n\nexport const ToolbarItemSpacers: React.FunctionComponent = () =&gt; {\n  const itemGapItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarGroup rowWrap={{ default: &#39;wrap&#39; }}&gt;\n        &lt;ToolbarItem gap={{ default: &#39;gapNone&#39; }}&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Gap&lt;/Button&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem variant=\&quot;separator\&quot;&gt;&lt;/ToolbarItem&gt;\n        &lt;ToolbarItem gap={{ default: &#39;gapSm&#39; }}&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Gap&lt;/Button&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem variant=\&quot;separator\&quot;&gt;&lt;/ToolbarItem&gt;\n        &lt;ToolbarItem gap={{ default: &#39;gapXl&#39; }}&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Gap&lt;/Button&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n    &lt;/Fragment&gt;\n  );\n\n  const itemColumnGapItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarGroup rowWrap={{ default: &#39;wrap&#39; }}&gt;\n        &lt;ToolbarItem columnGap={{ default: &#39;columnGapNone&#39; }}&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Column Gap&lt;/Button&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Column Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem variant=\&quot;separator\&quot;&gt;&lt;/ToolbarItem&gt;\n        &lt;ToolbarItem columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Column Gap&lt;/Button&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Column Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem variant=\&quot;separator\&quot;&gt;&lt;/ToolbarItem&gt;\n        &lt;ToolbarItem columnGap={{ default: &#39;columnGapXl&#39; }}&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Column Gap&lt;/Button&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Column Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n    &lt;/Fragment&gt;\n  );\n\n  const itemRowGapItems = (\n    &lt;Fragment&gt;\n      &lt;ToolbarGroup&gt;\n        &lt;ToolbarItem rowGap={{ default: &#39;rowGapNone&#39; }} rowWrap={{ default: &#39;wrap&#39; }}&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Row Gap&lt;/Button&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;No Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem variant=\&quot;separator\&quot;&gt;&lt;/ToolbarItem&gt;\n        &lt;ToolbarItem rowGap={{ default: &#39;rowGapSm&#39; }} rowWrap={{ default: &#39;wrap&#39; }}&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Row Gap&lt;/Button&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Small Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n        &lt;ToolbarItem variant=\&quot;separator\&quot;&gt;&lt;/ToolbarItem&gt;\n        &lt;ToolbarItem rowGap={{ default: &#39;rowGapXl&#39; }} rowWrap={{ default: &#39;wrap&#39; }}&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Row Gap&lt;/Button&gt;\n          &lt;Button variant=\&quot;secondary\&quot;&gt;Extra Large Row Gap&lt;/Button&gt;\n        &lt;/ToolbarItem&gt;\n      &lt;/ToolbarGroup&gt;\n    &lt;/Fragment&gt;\n  );\n\n  return (\n    &lt;&gt;\n      Using gap\n      &lt;br /&gt;\n      &lt;br /&gt;\n      &lt;Toolbar id=\&quot;toolbar-spacers\&quot;&gt;\n        &lt;ToolbarContent&gt;{itemGapItems}&lt;/ToolbarContent&gt;\n      &lt;/Toolbar&gt;\n      Using column gap\n      &lt;br /&gt;\n      &lt;br /&gt;\n      &lt;Toolbar id=\&quot;toolbar-spacers\&quot;&gt;\n        &lt;ToolbarContent&gt;{itemColumnGapItems}&lt;/ToolbarContent&gt;\n      &lt;/Toolbar&gt;\n      Using row gap\n      &lt;br /&gt;\n      &lt;br /&gt;\n      &lt;Toolbar id=\&quot;toolbar-spacers\&quot;&gt;\n        &lt;ToolbarContent&gt;{itemRowGapItems}&lt;/ToolbarContent&gt;\n      &lt;/Toolbar&gt;\n    &lt;/&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="Z2r17TF" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Toolbar&quot;],[0,&quot;ToolbarContent&quot;],[0,&quot;ToolbarGroup&quot;],[0,&quot;ToolbarItem&quot;],[0,&quot;ToolbarToggleGroup&quot;],[0,&quot;ToolbarFilter&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/toolbar/react&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;PropsTables&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2940" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
+CSS variables
+</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="ZTcjsE" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;autoLinkHeader&quot;:[0,false],&quot;cssPrefix&quot;:[0,&quot;pf-v6-c-toolbar&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;CSSTableComponent&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div></div></div></div> </div></section>   </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>