npm - @patternfly/patternfly-doc-core - Versions diffs - 1.13.1 → 1.13.3 - Mend

@patternfly/patternfly-doc-core 1.13.1 → 1.13.3

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 (373) hide show

package/dist/docs/components/button/index.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!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">
+<!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.13.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.DZnDNxNb.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">
@@ -42,11 +42,11 @@
 	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="Z2hiQwg" prefix="r5" component-url="/_astro/PageToggle.DBsLIFpI.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-286"><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="ZCknEI" 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-96"><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-287"><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-288"><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-96"><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/button/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-1732" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
+			[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="Z2hiQwg" prefix="r5" component-url="/_astro/PageToggle.DBsLIFpI.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-286"><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="ZCknEI" 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-96"><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-287"><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-288"><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-96"><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.x46lNg3Y.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/button/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-1732" 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-1733" data-pf-content="true" class="pf-v6-c-content--h3">Variant examples</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1752" data-pf-content="true" class="pf-v6-c-content--p">PatternFly supports several button styling variants to be used in different scenarios as needed. The following button variants can be assigned using the <code>variant</code> property.</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="Z1HHCW2" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Flex } from &#39;@patternfly/react-core&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\nimport PlusCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/plus-circle-icon&#39;;\nimport ExternalLinkSquareAltIcon from &#39;@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon&#39;;\nimport CopyIcon from &#39;@patternfly/react-icons/dist/esm/icons/copy-icon&#39;;\nimport BellIcon from &#39;@patternfly/react-icons/dist/esm/icons/bell-icon&#39;;\n\nexport const ButtonVariations: React.FunctionComponent = () =&gt; (\n  &lt;&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button variant=\&quot;primary\&quot; ouiaId=\&quot;Primary\&quot;&gt;\n        Primary\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;secondary\&quot; ouiaId=\&quot;Secondary\&quot;&gt;\n        Secondary\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;secondary\&quot; ouiaId=\&quot;DangerSecondary\&quot; isDanger&gt;\n        Danger Secondary\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;tertiary\&quot; ouiaId=\&quot;Tertiary\&quot;&gt;\n        Tertiary\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;danger\&quot; ouiaId=\&quot;Danger\&quot;&gt;\n        Danger\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;warning\&quot; ouiaId=\&quot;Warning\&quot;&gt;\n        Warning\n      &lt;/Button&gt;\n    &lt;/Flex&gt;\n    &lt;br /&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button variant=\&quot;link\&quot; icon={&lt;PlusCircleIcon /&gt;}&gt;\n        Link\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;link\&quot; icon={&lt;ExternalLinkSquareAltIcon /&gt;} iconPosition=\&quot;end\&quot;&gt;\n        Link\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;link\&quot; isInline&gt;\n        Inline link\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;link\&quot; isDanger&gt;\n        Danger link\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;Action\&quot; icon={&lt;TimesIcon /&gt;} /&gt;\n    &lt;/Flex&gt;\n    &lt;br /&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button variant=\&quot;control\&quot;&gt;Control&lt;/Button&gt;\n      &lt;Button variant=\&quot;control\&quot; aria-label=\&quot;Copy\&quot; icon={&lt;CopyIcon /&gt;} /&gt;\n    &lt;/Flex&gt;\n    &lt;br /&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button variant=\&quot;stateful\&quot; icon={&lt;BellIcon /&gt;} state=\&quot;read\&quot;&gt;\n        Stateful read\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;stateful\&quot; icon={&lt;BellIcon /&gt;} state=\&quot;unread\&quot;&gt;\n        Stateful unread\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;stateful\&quot; icon={&lt;BellIcon /&gt;} state=\&quot;attention\&quot;&gt;\n        Stateful attention\n      &lt;/Button&gt;\n    &lt;/Flex&gt;\n  &lt;/&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>
+<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="Z1HHCW2" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Flex } from &#39;@patternfly/react-core&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\nimport PlusCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/plus-circle-icon&#39;;\nimport ExternalLinkSquareAltIcon from &#39;@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon&#39;;\nimport CopyIcon from &#39;@patternfly/react-icons/dist/esm/icons/copy-icon&#39;;\nimport BellIcon from &#39;@patternfly/react-icons/dist/esm/icons/bell-icon&#39;;\n\nexport const ButtonVariations: React.FunctionComponent = () =&gt; (\n  &lt;&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button variant=\&quot;primary\&quot; ouiaId=\&quot;Primary\&quot;&gt;\n        Primary\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;secondary\&quot; ouiaId=\&quot;Secondary\&quot;&gt;\n        Secondary\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;secondary\&quot; ouiaId=\&quot;DangerSecondary\&quot; isDanger&gt;\n        Danger Secondary\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;tertiary\&quot; ouiaId=\&quot;Tertiary\&quot;&gt;\n        Tertiary\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;danger\&quot; ouiaId=\&quot;Danger\&quot;&gt;\n        Danger\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;warning\&quot; ouiaId=\&quot;Warning\&quot;&gt;\n        Warning\n      &lt;/Button&gt;\n    &lt;/Flex&gt;\n    &lt;br /&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button variant=\&quot;link\&quot; icon={&lt;PlusCircleIcon /&gt;}&gt;\n        Link\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;link\&quot; icon={&lt;ExternalLinkSquareAltIcon /&gt;} iconPosition=\&quot;end\&quot;&gt;\n        Link\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;link\&quot; isInline&gt;\n        Inline link\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;link\&quot; isDanger&gt;\n        Danger link\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;Action\&quot; icon={&lt;TimesIcon /&gt;} /&gt;\n    &lt;/Flex&gt;\n    &lt;br /&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button variant=\&quot;control\&quot;&gt;Control&lt;/Button&gt;\n      &lt;Button variant=\&quot;control\&quot; aria-label=\&quot;Copy\&quot; icon={&lt;CopyIcon /&gt;} /&gt;\n    &lt;/Flex&gt;\n    &lt;br /&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button variant=\&quot;stateful\&quot; icon={&lt;BellIcon /&gt;} state=\&quot;read\&quot;&gt;\n        Stateful read\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;stateful\&quot; icon={&lt;BellIcon /&gt;} state=\&quot;unread\&quot;&gt;\n        Stateful unread\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;stateful\&quot; icon={&lt;BellIcon /&gt;} state=\&quot;attention\&quot;&gt;\n        Stateful attention\n      &lt;/Button&gt;\n    &lt;/Flex&gt;\n  &lt;/&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>
@@ -96,53 +96,53 @@
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1735" data-pf-content="true" class="pf-v6-c-content--h3">Disabled buttons</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1753" data-pf-content="true" class="pf-v6-c-content--p">To indicate that an action is currently unavailable, all button variations can be disabled using the <code>isDisabled</code> property.</p>
-<astro-island uid="Z1xbzBF" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Flex } from &#39;@patternfly/react-core&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\nimport PlusCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/plus-circle-icon&#39;;\nimport CopyIcon from &#39;@patternfly/react-icons/dist/esm/icons/copy-icon&#39;;\n\nexport const ButtonDisabled: React.FunctionComponent = () =&gt; (\n  &lt;&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button isDisabled&gt;Primary&lt;/Button&gt;\n      &lt;Button variant=\&quot;secondary\&quot; isDisabled&gt;\n        Secondary\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;secondary\&quot; isDanger isDisabled&gt;\n        Danger secondary\n      &lt;/Button&gt;\n      &lt;Button isDisabled variant=\&quot;tertiary\&quot;&gt;\n        Tertiary\n      &lt;/Button&gt;\n      &lt;Button isDisabled variant=\&quot;danger\&quot;&gt;\n        Danger\n      &lt;/Button&gt;\n      &lt;Button isDisabled variant=\&quot;warning\&quot;&gt;\n        Warning\n      &lt;/Button&gt;\n    &lt;/Flex&gt;\n    &lt;br /&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button isDisabled variant=\&quot;link\&quot; icon={&lt;PlusCircleIcon /&gt;}&gt;\n        Link\n      &lt;/Button&gt;\n      &lt;Button isDisabled variant=\&quot;link\&quot; isInline&gt;\n        Inline link\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;link\&quot; isDanger isDisabled&gt;\n        Danger link\n      &lt;/Button&gt;\n      &lt;Button isDisabled variant=\&quot;plain\&quot; aria-label=\&quot;Action\&quot; icon={&lt;TimesIcon /&gt;} /&gt;\n    &lt;/Flex&gt;\n    &lt;br /&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button isDisabled variant=\&quot;control\&quot;&gt;\n        Control\n      &lt;/Button&gt;\n      &lt;Button isDisabled variant=\&quot;control\&quot; aria-label=\&quot;Copy\&quot; icon={&lt;CopyIcon /&gt;} /&gt;\n    &lt;/Flex&gt;\n  &lt;/&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>
+<astro-island uid="Z1xbzBF" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Flex } from &#39;@patternfly/react-core&#39;;\nimport TimesIcon from &#39;@patternfly/react-icons/dist/esm/icons/times-icon&#39;;\nimport PlusCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/plus-circle-icon&#39;;\nimport CopyIcon from &#39;@patternfly/react-icons/dist/esm/icons/copy-icon&#39;;\n\nexport const ButtonDisabled: React.FunctionComponent = () =&gt; (\n  &lt;&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button isDisabled&gt;Primary&lt;/Button&gt;\n      &lt;Button variant=\&quot;secondary\&quot; isDisabled&gt;\n        Secondary\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;secondary\&quot; isDanger isDisabled&gt;\n        Danger secondary\n      &lt;/Button&gt;\n      &lt;Button isDisabled variant=\&quot;tertiary\&quot;&gt;\n        Tertiary\n      &lt;/Button&gt;\n      &lt;Button isDisabled variant=\&quot;danger\&quot;&gt;\n        Danger\n      &lt;/Button&gt;\n      &lt;Button isDisabled variant=\&quot;warning\&quot;&gt;\n        Warning\n      &lt;/Button&gt;\n    &lt;/Flex&gt;\n    &lt;br /&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button isDisabled variant=\&quot;link\&quot; icon={&lt;PlusCircleIcon /&gt;}&gt;\n        Link\n      &lt;/Button&gt;\n      &lt;Button isDisabled variant=\&quot;link\&quot; isInline&gt;\n        Inline link\n      &lt;/Button&gt;\n      &lt;Button variant=\&quot;link\&quot; isDanger isDisabled&gt;\n        Danger link\n      &lt;/Button&gt;\n      &lt;Button isDisabled variant=\&quot;plain\&quot; aria-label=\&quot;Action\&quot; icon={&lt;TimesIcon /&gt;} /&gt;\n    &lt;/Flex&gt;\n    &lt;br /&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button isDisabled variant=\&quot;control\&quot;&gt;\n        Control\n      &lt;/Button&gt;\n      &lt;Button isDisabled variant=\&quot;control\&quot; aria-label=\&quot;Copy\&quot; icon={&lt;CopyIcon /&gt;} /&gt;\n    &lt;/Flex&gt;\n  &lt;/&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>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1736" data-pf-content="true" class="pf-v6-c-content--h3">Small buttons</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1754" data-pf-content="true" class="pf-v6-c-content--p">To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the <code>&quot;sm&quot;</code> value for the <code>size</code> property.</p>
-<astro-island uid="2vCbVc" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Flex } from &#39;@patternfly/react-core&#39;;\n\nexport const ButtonSmall: React.FunctionComponent = () =&gt; (\n  &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n    &lt;Button variant=\&quot;primary\&quot; size=\&quot;sm\&quot;&gt;\n      Primary\n    &lt;/Button&gt;\n    &lt;Button variant=\&quot;secondary\&quot; size=\&quot;sm\&quot;&gt;\n      Secondary\n    &lt;/Button&gt;\n    &lt;Button variant=\&quot;tertiary\&quot; size=\&quot;sm\&quot;&gt;\n      Tertiary\n    &lt;/Button&gt;\n    &lt;Button variant=\&quot;danger\&quot; size=\&quot;sm\&quot;&gt;\n      Danger\n    &lt;/Button&gt;\n    &lt;Button variant=\&quot;warning\&quot; size=\&quot;sm\&quot;&gt;\n      Warning\n    &lt;/Button&gt;\n  &lt;/Flex&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>
+<astro-island uid="2vCbVc" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Flex } from &#39;@patternfly/react-core&#39;;\n\nexport const ButtonSmall: React.FunctionComponent = () =&gt; (\n  &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n    &lt;Button variant=\&quot;primary\&quot; size=\&quot;sm\&quot;&gt;\n      Primary\n    &lt;/Button&gt;\n    &lt;Button variant=\&quot;secondary\&quot; size=\&quot;sm\&quot;&gt;\n      Secondary\n    &lt;/Button&gt;\n    &lt;Button variant=\&quot;tertiary\&quot; size=\&quot;sm\&quot;&gt;\n      Tertiary\n    &lt;/Button&gt;\n    &lt;Button variant=\&quot;danger\&quot; size=\&quot;sm\&quot;&gt;\n      Danger\n    &lt;/Button&gt;\n    &lt;Button variant=\&quot;warning\&quot; size=\&quot;sm\&quot;&gt;\n      Warning\n    &lt;/Button&gt;\n  &lt;/Flex&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>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1737" data-pf-content="true" class="pf-v6-c-content--h3">Call to action (CTA) buttons</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1755" data-pf-content="true" class="pf-v6-c-content--p">CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the <code>&quot;lg&quot;</code> value for the <code>size</code> property.</p>
-<astro-island uid="ZOfy8z" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Flex } from &#39;@patternfly/react-core&#39;;\nimport ArrowRightIcon from &#39;@patternfly/react-icons/dist/esm/icons/arrow-right-icon&#39;;\n\nexport const ButtonCallToAction: React.FunctionComponent = () =&gt; (\n  &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n    &lt;Button variant=\&quot;primary\&quot; size=\&quot;lg\&quot;&gt;\n      Call to action\n    &lt;/Button&gt;\n    &lt;Button variant=\&quot;secondary\&quot; size=\&quot;lg\&quot;&gt;\n      Call to action\n    &lt;/Button&gt;\n    &lt;Button variant=\&quot;tertiary\&quot; size=\&quot;lg\&quot;&gt;\n      Call to action\n    &lt;/Button&gt;\n    &lt;Button variant=\&quot;link\&quot; size=\&quot;lg\&quot; icon={&lt;ArrowRightIcon /&gt;} iconPosition=\&quot;end\&quot;&gt;\n      Call to action\n    &lt;/Button&gt;\n  &lt;/Flex&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>
+<astro-island uid="ZOfy8z" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Flex } from &#39;@patternfly/react-core&#39;;\nimport ArrowRightIcon from &#39;@patternfly/react-icons/dist/esm/icons/arrow-right-icon&#39;;\n\nexport const ButtonCallToAction: React.FunctionComponent = () =&gt; (\n  &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n    &lt;Button variant=\&quot;primary\&quot; size=\&quot;lg\&quot;&gt;\n      Call to action\n    &lt;/Button&gt;\n    &lt;Button variant=\&quot;secondary\&quot; size=\&quot;lg\&quot;&gt;\n      Call to action\n    &lt;/Button&gt;\n    &lt;Button variant=\&quot;tertiary\&quot; size=\&quot;lg\&quot;&gt;\n      Call to action\n    &lt;/Button&gt;\n    &lt;Button variant=\&quot;link\&quot; size=\&quot;lg\&quot; icon={&lt;ArrowRightIcon /&gt;} iconPosition=\&quot;end\&quot;&gt;\n      Call to action\n    &lt;/Button&gt;\n  &lt;/Flex&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>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1738" data-pf-content="true" class="pf-v6-c-content--h3">Block level buttons</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1756" data-pf-content="true" class="pf-v6-c-content--p">Block level buttons span the full width of the parent element and can be enabled using the <code>isBlock</code> property.</p>
-<astro-island uid="wT1tj" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button } from &#39;@patternfly/react-core&#39;;\n\nexport const ButtonBlock: React.FunctionComponent = () =&gt; &lt;Button isBlock&gt;Block level button&lt;/Button&gt;;\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="wT1tj" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button } from &#39;@patternfly/react-core&#39;;\n\nexport const ButtonBlock: React.FunctionComponent = () =&gt; &lt;Button isBlock&gt;Block level button&lt;/Button&gt;;\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-1739" data-pf-content="true" class="pf-v6-c-content--h3">Progress indicators</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1740" data-pf-content="true" class="pf-v6-c-content--p">Progress indicators can be added to buttons to identify that an action is in progress after a click.</p>
-<astro-island uid="Zq88Wd" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Button, Flex } from &#39;@patternfly/react-core&#39;;\nimport UploadIcon from &#39;@patternfly/react-icons/dist/esm/icons/upload-icon&#39;;\n\ninterface LoadingPropsType {\n  spinnerAriaValueText: string;\n  spinnerAriaLabelledBy?: string;\n  spinnerAriaLabel?: string;\n  isLoading: boolean;\n}\n\nexport const ButtonProgress: React.FunctionComponent = () =&gt; {\n  const [isPrimaryLoading, setIsPrimaryLoading] = useState&lt;boolean&gt;(true);\n  const [isSecondaryLoading, setIsSecondaryLoading] = useState&lt;boolean&gt;(true);\n  const [isInlineLoading, setIsInlineLoading] = useState&lt;boolean&gt;(true);\n  const [isUploading, setIsUploading] = useState&lt;boolean&gt;(false);\n\n  const primaryLoadingProps = {} as LoadingPropsType;\n  primaryLoadingProps.spinnerAriaValueText = &#39;Loading&#39;;\n  primaryLoadingProps.spinnerAriaLabelledBy = &#39;primary-loading-button&#39;;\n  primaryLoadingProps.isLoading = isPrimaryLoading;\n\n  const secondaryLoadingProps = {} as LoadingPropsType;\n  secondaryLoadingProps.spinnerAriaValueText = &#39;Loading&#39;;\n  secondaryLoadingProps.spinnerAriaLabel = &#39;Content being loaded&#39;;\n  secondaryLoadingProps.isLoading = isSecondaryLoading;\n\n  const inlineLoadingProps = {} as LoadingPropsType;\n  inlineLoadingProps.spinnerAriaValueText = &#39;Loading&#39;;\n  inlineLoadingProps.spinnerAriaLabel = &#39;Content being loaded&#39;;\n  inlineLoadingProps.isLoading = isInlineLoading;\n\n  const uploadingProps = {} as LoadingPropsType;\n  uploadingProps.spinnerAriaValueText = &#39;Loading&#39;;\n  uploadingProps.spinnerAriaLabel = &#39;Uploading data&#39;;\n  uploadingProps.isLoading = isUploading;\n\n  return (\n    &lt;&gt;\n      &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n        &lt;Button\n          variant=\&quot;primary\&quot;\n          id=\&quot;primary-loading-button\&quot;\n          onClick={() =&gt; setIsPrimaryLoading(!isPrimaryLoading)}\n          {...primaryLoadingProps}\n        &gt;\n          {isPrimaryLoading ? &#39;Click to stop loading&#39; : &#39;Click to start loading&#39;}\n        &lt;/Button&gt;\n        &lt;Button\n          variant=\&quot;secondary\&quot;\n          onClick={() =&gt; setIsSecondaryLoading(!isSecondaryLoading)}\n          {...secondaryLoadingProps}\n        &gt;\n          {isSecondaryLoading ? &#39;Click to stop loading&#39; : &#39;Click to start loading&#39;}\n        &lt;/Button&gt;\n      &lt;/Flex&gt;\n      &lt;br /&gt;\n      &lt;Button\n        variant=\&quot;plain\&quot;\n        {...(!isUploading &amp;&amp; { &#39;aria-label&#39;: &#39;Upload&#39; })}\n        onClick={() =&gt; setIsUploading(!isUploading)}\n        icon={&lt;UploadIcon /&gt;}\n        {...uploadingProps}\n      /&gt;\n      &lt;br /&gt;\n      &lt;br /&gt;\n      &lt;Button variant=\&quot;link\&quot; isInline onClick={() =&gt; setIsInlineLoading(!isInlineLoading)} {...inlineLoadingProps}&gt;\n        {isInlineLoading ? &#39;Pause loading logs&#39; : &#39;Resume loading logs&#39;}\n      &lt;/Button&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>
+<astro-island uid="Zq88Wd" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Button, Flex } from &#39;@patternfly/react-core&#39;;\nimport UploadIcon from &#39;@patternfly/react-icons/dist/esm/icons/upload-icon&#39;;\n\ninterface LoadingPropsType {\n  spinnerAriaValueText: string;\n  spinnerAriaLabelledBy?: string;\n  spinnerAriaLabel?: string;\n  isLoading: boolean;\n}\n\nexport const ButtonProgress: React.FunctionComponent = () =&gt; {\n  const [isPrimaryLoading, setIsPrimaryLoading] = useState&lt;boolean&gt;(true);\n  const [isSecondaryLoading, setIsSecondaryLoading] = useState&lt;boolean&gt;(true);\n  const [isInlineLoading, setIsInlineLoading] = useState&lt;boolean&gt;(true);\n  const [isUploading, setIsUploading] = useState&lt;boolean&gt;(false);\n\n  const primaryLoadingProps = {} as LoadingPropsType;\n  primaryLoadingProps.spinnerAriaValueText = &#39;Loading&#39;;\n  primaryLoadingProps.spinnerAriaLabelledBy = &#39;primary-loading-button&#39;;\n  primaryLoadingProps.isLoading = isPrimaryLoading;\n\n  const secondaryLoadingProps = {} as LoadingPropsType;\n  secondaryLoadingProps.spinnerAriaValueText = &#39;Loading&#39;;\n  secondaryLoadingProps.spinnerAriaLabel = &#39;Content being loaded&#39;;\n  secondaryLoadingProps.isLoading = isSecondaryLoading;\n\n  const inlineLoadingProps = {} as LoadingPropsType;\n  inlineLoadingProps.spinnerAriaValueText = &#39;Loading&#39;;\n  inlineLoadingProps.spinnerAriaLabel = &#39;Content being loaded&#39;;\n  inlineLoadingProps.isLoading = isInlineLoading;\n\n  const uploadingProps = {} as LoadingPropsType;\n  uploadingProps.spinnerAriaValueText = &#39;Loading&#39;;\n  uploadingProps.spinnerAriaLabel = &#39;Uploading data&#39;;\n  uploadingProps.isLoading = isUploading;\n\n  return (\n    &lt;&gt;\n      &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n        &lt;Button\n          variant=\&quot;primary\&quot;\n          id=\&quot;primary-loading-button\&quot;\n          onClick={() =&gt; setIsPrimaryLoading(!isPrimaryLoading)}\n          {...primaryLoadingProps}\n        &gt;\n          {isPrimaryLoading ? &#39;Click to stop loading&#39; : &#39;Click to start loading&#39;}\n        &lt;/Button&gt;\n        &lt;Button\n          variant=\&quot;secondary\&quot;\n          onClick={() =&gt; setIsSecondaryLoading(!isSecondaryLoading)}\n          {...secondaryLoadingProps}\n        &gt;\n          {isSecondaryLoading ? &#39;Click to stop loading&#39; : &#39;Click to start loading&#39;}\n        &lt;/Button&gt;\n      &lt;/Flex&gt;\n      &lt;br /&gt;\n      &lt;Button\n        variant=\&quot;plain\&quot;\n        {...(!isUploading &amp;&amp; { &#39;aria-label&#39;: &#39;Upload&#39; })}\n        onClick={() =&gt; setIsUploading(!isUploading)}\n        icon={&lt;UploadIcon /&gt;}\n        {...uploadingProps}\n      /&gt;\n      &lt;br /&gt;\n      &lt;br /&gt;\n      &lt;Button variant=\&quot;link\&quot; isInline onClick={() =&gt; setIsInlineLoading(!isInlineLoading)} {...inlineLoadingProps}&gt;\n        {isInlineLoading ? &#39;Pause loading logs&#39; : &#39;Resume loading logs&#39;}\n      &lt;/Button&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-1741" data-pf-content="true" class="pf-v6-c-content--h3">Links as buttons</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1757" data-pf-content="true" class="pf-v6-c-content--p">Buttons that link to another resource may take the form of primary, secondary, tertiary, or link variants. Use <code>component=&quot;a&quot;</code> and an <code>href</code> property to designate the button’s target link.</p>
-<astro-island uid="ZdV8pa" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Flex } from &#39;@patternfly/react-core&#39;;\n\nexport const ButtonLinks: React.FunctionComponent = () =&gt; (\n  &lt;Flex&gt;\n    &lt;Button component=\&quot;a\&quot; href=\&quot;https://www.patternfly.org/\&quot; target=\&quot;_blank\&quot; variant=\&quot;primary\&quot;&gt;\n      Link to PatternFly home\n    &lt;/Button&gt;\n    &lt;Button component=\&quot;a\&quot; href=\&quot;https://www.patternfly.org/\&quot; target=\&quot;_blank\&quot; variant=\&quot;secondary\&quot;&gt;\n      Secondary link to PatternFly home\n    &lt;/Button&gt;\n    &lt;Button isDisabled component=\&quot;a\&quot; href=\&quot;https://www.patternfly.org/\&quot; target=\&quot;_blank\&quot; variant=\&quot;tertiary\&quot;&gt;\n      Tertiary link to PatternFly home\n    &lt;/Button&gt;\n    &lt;Button component=\&quot;a\&quot; href=\&quot;https://www.patternfly.org/\&quot; variant=\&quot;link\&quot;&gt;\n      Jump to PatternFly home\n    &lt;/Button&gt;\n  &lt;/Flex&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>
+<astro-island uid="ZdV8pa" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Flex } from &#39;@patternfly/react-core&#39;;\n\nexport const ButtonLinks: React.FunctionComponent = () =&gt; (\n  &lt;Flex&gt;\n    &lt;Button component=\&quot;a\&quot; href=\&quot;https://www.patternfly.org/\&quot; target=\&quot;_blank\&quot; variant=\&quot;primary\&quot;&gt;\n      Link to PatternFly home\n    &lt;/Button&gt;\n    &lt;Button component=\&quot;a\&quot; href=\&quot;https://www.patternfly.org/\&quot; target=\&quot;_blank\&quot; variant=\&quot;secondary\&quot;&gt;\n      Secondary link to PatternFly home\n    &lt;/Button&gt;\n    &lt;Button isDisabled component=\&quot;a\&quot; href=\&quot;https://www.patternfly.org/\&quot; target=\&quot;_blank\&quot; variant=\&quot;tertiary\&quot;&gt;\n      Tertiary link to PatternFly home\n    &lt;/Button&gt;\n    &lt;Button component=\&quot;a\&quot; href=\&quot;https://www.patternfly.org/\&quot; variant=\&quot;link\&quot;&gt;\n      Jump to PatternFly home\n    &lt;/Button&gt;\n  &lt;/Flex&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>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1742" data-pf-content="true" class="pf-v6-c-content--h3">Inline link as span</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1758" data-pf-content="true" class="pf-v6-c-content--p">Inline links should use <code>component=&quot;span&quot;</code> and the <code>isInline</code> property to wrap inline with surrounding text.</p>
-<astro-island uid="Z8pCvA" 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 { Button, KeyTypes } from &#39;@patternfly/react-core&#39;;\n\nconst handleKeydown = (event: React.KeyboardEvent&lt;HTMLButtonElement&gt;) =&gt; {\n  const { key } = event;\n  const isEnterKey: boolean = key === KeyTypes.Enter;\n  const isEnterOrSpaceKey: boolean = isEnterKey || key === KeyTypes.Space;\n\n  if (isEnterOrSpaceKey) {\n    event.preventDefault();\n    alert(`${isEnterKey ? &#39;Enter&#39; : &#39;Space&#39;} key default behavior stopped by onKeyDown`);\n  }\n};\n\nexport const ButtonInlineSpanLink: React.FunctionComponent = () =&gt; (\n  &lt;Fragment&gt;\n    &lt;p&gt;\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n      &lt;Button variant=\&quot;link\&quot; isInline component=\&quot;span\&quot;&gt;\n        This is long button text that needs to be a span so that it will wrap inline with the text around it.\n      &lt;/Button&gt;\n      Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum velit elementum non.\n    &lt;/p&gt;\n\n    &lt;br /&gt;\n\n    &lt;p&gt;\n      Note that using a &lt;b&gt;span&lt;/b&gt; as a button does not fire the &lt;b&gt;onclick&lt;/b&gt; event for Enter or Space keys.\n      &lt;Button variant=\&quot;link\&quot; isInline component=\&quot;span\&quot; onKeyDown={handleKeydown}&gt;\n        An &lt;b&gt;onKeyDown&lt;/b&gt; event listener is needed for Enter and Space key presses to prevent their default behavior\n        and trigger your code.\n      &lt;/Button&gt;\n      Pressing the Enter or Space keys on the inline link as span above demonstrates this by triggering an alert.\n    &lt;/p&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>
+<astro-island uid="Z8pCvA" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment } from &#39;react&#39;;\nimport { Button, KeyTypes } from &#39;@patternfly/react-core&#39;;\n\nconst handleKeydown = (event: React.KeyboardEvent&lt;HTMLButtonElement&gt;) =&gt; {\n  const { key } = event;\n  const isEnterKey: boolean = key === KeyTypes.Enter;\n  const isEnterOrSpaceKey: boolean = isEnterKey || key === KeyTypes.Space;\n\n  if (isEnterOrSpaceKey) {\n    event.preventDefault();\n    alert(`${isEnterKey ? &#39;Enter&#39; : &#39;Space&#39;} key default behavior stopped by onKeyDown`);\n  }\n};\n\nexport const ButtonInlineSpanLink: React.FunctionComponent = () =&gt; (\n  &lt;Fragment&gt;\n    &lt;p&gt;\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n      &lt;Button variant=\&quot;link\&quot; isInline component=\&quot;span\&quot;&gt;\n        This is long button text that needs to be a span so that it will wrap inline with the text around it.\n      &lt;/Button&gt;\n      Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum velit elementum non.\n    &lt;/p&gt;\n\n    &lt;br /&gt;\n\n    &lt;p&gt;\n      Note that using a &lt;b&gt;span&lt;/b&gt; as a button does not fire the &lt;b&gt;onclick&lt;/b&gt; event for Enter or Space keys.\n      &lt;Button variant=\&quot;link\&quot; isInline component=\&quot;span\&quot; onKeyDown={handleKeydown}&gt;\n        An &lt;b&gt;onKeyDown&lt;/b&gt; event listener is needed for Enter and Space key presses to prevent their default behavior\n        and trigger your code.\n      &lt;/Button&gt;\n      Pressing the Enter or Space keys on the inline link as span above demonstrates this by triggering an alert.\n    &lt;/p&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>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1743" data-pf-content="true" class="pf-v6-c-content--h3">Custom component</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1759" data-pf-content="true" class="pf-v6-c-content--p">In addition to being able to pass a string to the <code>component</code> property, you can provide more fine-tuned customization by passing a callback that returns a component.</p>
-<astro-island uid="yaPiR" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button } from &#39;@patternfly/react-core&#39;;\n\nexport const ButtonCustomComponent: React.FunctionComponent = () =&gt; (\n  &lt;Button variant=\&quot;link\&quot; component={(props: any) =&gt; &lt;a {...props} href=\&quot;#\&quot; /&gt;}&gt;\n    Router link\n  &lt;/Button&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>
+<astro-island uid="yaPiR" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button } from &#39;@patternfly/react-core&#39;;\n\nexport const ButtonCustomComponent: React.FunctionComponent = () =&gt; (\n  &lt;Button variant=\&quot;link\&quot; component={(props: any) =&gt; &lt;a {...props} href=\&quot;#\&quot; /&gt;}&gt;\n    Router link\n  &lt;/Button&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>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1744" data-pf-content="true" class="pf-v6-c-content--h3">Aria-disabled examples</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1765" data-pf-content="true" class="pf-v6-c-content--p"><a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1745" data-pf-content="true" class="pf-v6-c-content--a">Accessible Rich Internet Applications (ARIA)</a> is a set of roles and attributes specified by the World Wide Web Consortium. ARIA defines ways to make web content and web applications more accessible to people with disabilities.</p>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1760" data-pf-content="true" class="pf-v6-c-content--p">Buttons that are aria-disabled are similar to normal disabled buttons, except they can receive focus. Every button variant can be aria-disabled using the <code>isAriaDisabled</code> property.</p>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1746" data-pf-content="true" class="pf-v6-c-content--p">Unlike normal disabled buttons, aria-disabled buttons can support tooltips. Furthermore, aria-disabled buttons can operate as links, which also support tooltips.</p>
-<astro-island uid="MazMB" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Flex, Tooltip } from &#39;@patternfly/react-core&#39;;\nimport PlusCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/plus-circle-icon&#39;;\n\nexport const ButtonAriaDisabled: React.FunctionComponent = () =&gt; (\n  &lt;&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button isAriaDisabled&gt;Primary aria disabled&lt;/Button&gt;\n      &lt;Button isAriaDisabled variant=\&quot;link\&quot; icon={&lt;PlusCircleIcon /&gt;}&gt;\n        Link aria disabled\n      &lt;/Button&gt;\n      &lt;Button isAriaDisabled variant=\&quot;link\&quot; isInline&gt;\n        Inline link aria disabled\n      &lt;/Button&gt;\n    &lt;/Flex&gt;\n    &lt;br /&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Tooltip content=\&quot;Aria-disabled buttons are like disabled buttons, but focusable. Allows for tooltip support.\&quot;&gt;\n        &lt;Button isAriaDisabled&gt;Primary button with tooltip&lt;/Button&gt;\n      &lt;/Tooltip&gt;\n      &lt;Tooltip content=\&quot;Aria-disabled link as button with tooltip\&quot;&gt;\n        &lt;Button component=\&quot;a\&quot; isAriaDisabled href=\&quot;https://www.patternfly.org/\&quot; target=\&quot;_blank\&quot; variant=\&quot;secondary\&quot;&gt;\n          Secondary link as button to PatternFly home\n        &lt;/Button&gt;\n      &lt;/Tooltip&gt;\n    &lt;/Flex&gt;\n  &lt;/&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>
+<astro-island uid="MazMB" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Flex, Tooltip } from &#39;@patternfly/react-core&#39;;\nimport PlusCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/plus-circle-icon&#39;;\n\nexport const ButtonAriaDisabled: React.FunctionComponent = () =&gt; (\n  &lt;&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Button isAriaDisabled&gt;Primary aria disabled&lt;/Button&gt;\n      &lt;Button isAriaDisabled variant=\&quot;link\&quot; icon={&lt;PlusCircleIcon /&gt;}&gt;\n        Link aria disabled\n      &lt;/Button&gt;\n      &lt;Button isAriaDisabled variant=\&quot;link\&quot; isInline&gt;\n        Inline link aria disabled\n      &lt;/Button&gt;\n    &lt;/Flex&gt;\n    &lt;br /&gt;\n    &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n      &lt;Tooltip content=\&quot;Aria-disabled buttons are like disabled buttons, but focusable. Allows for tooltip support.\&quot;&gt;\n        &lt;Button isAriaDisabled&gt;Primary button with tooltip&lt;/Button&gt;\n      &lt;/Tooltip&gt;\n      &lt;Tooltip content=\&quot;Aria-disabled link as button with tooltip\&quot;&gt;\n        &lt;Button component=\&quot;a\&quot; isAriaDisabled href=\&quot;https://www.patternfly.org/\&quot; target=\&quot;_blank\&quot; variant=\&quot;secondary\&quot;&gt;\n          Secondary link as button to PatternFly home\n        &lt;/Button&gt;\n      &lt;/Tooltip&gt;\n    &lt;/Flex&gt;\n  &lt;/&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>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1747" data-pf-content="true" class="pf-v6-c-content--h3">Button with count</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1761" data-pf-content="true" class="pf-v6-c-content--p">Buttons can display a <code>count</code> in the form of a badge to indicate some value or number by passing in the <code>countOptions</code> prop as a <code>BadgeCountObject</code> object. The <code>BadgeCountObject</code> object will handle <code>count</code>, <code>isRead</code>, and <code>className</code> props for the badge count.</p>
-<astro-island uid="10q2xC" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { BadgeCountObject, Button, Flex } from &#39;@patternfly/react-core&#39;;\n\nexport const ButtonWithCount: React.FunctionComponent = () =&gt; {\n  const badgeCountObjectNotRead: BadgeCountObject = {\n    isRead: false,\n    count: 7,\n    className: &#39;custom-badge-unread&#39;\n  };\n\n  const badgeCountObjectRead: BadgeCountObject = {\n    isRead: true,\n    count: 10,\n    className: &#39;custom-badge-read&#39;\n  };\n\n  return (\n    &lt;&gt;\n      &lt;div&gt;Unread:&lt;/div&gt;\n      &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n        &lt;Button variant=\&quot;primary\&quot; countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;secondary\&quot; countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;tertiary\&quot; countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;control\&quot; countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;link\&quot; countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n      &lt;/Flex&gt;\n      &lt;br /&gt;\n      &lt;div&gt;Unread disabled:&lt;/div&gt;\n      &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n        &lt;Button variant=\&quot;primary\&quot; isDisabled countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;secondary\&quot; isDisabled countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;tertiary\&quot; isDisabled countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;control\&quot; isDisabled countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;link\&quot; isDisabled countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n      &lt;/Flex&gt;\n      &lt;br /&gt;\n      &lt;div&gt;Read:&lt;/div&gt;\n      &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n        &lt;Button variant=\&quot;primary\&quot; countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;secondary\&quot; countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;tertiary\&quot; countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;control\&quot; countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;link\&quot; countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n      &lt;/Flex&gt;\n      &lt;br /&gt;\n      &lt;div&gt;Read disabled:&lt;/div&gt;\n      &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n        &lt;Button variant=\&quot;primary\&quot; isDisabled countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;secondary\&quot; isDisabled countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;tertiary\&quot; isDisabled countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;control\&quot; isDisabled countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;link\&quot; isDisabled countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n      &lt;/Flex&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>
+<astro-island uid="10q2xC" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { BadgeCountObject, Button, Flex } from &#39;@patternfly/react-core&#39;;\n\nexport const ButtonWithCount: React.FunctionComponent = () =&gt; {\n  const badgeCountObjectNotRead: BadgeCountObject = {\n    isRead: false,\n    count: 7,\n    className: &#39;custom-badge-unread&#39;\n  };\n\n  const badgeCountObjectRead: BadgeCountObject = {\n    isRead: true,\n    count: 10,\n    className: &#39;custom-badge-read&#39;\n  };\n\n  return (\n    &lt;&gt;\n      &lt;div&gt;Unread:&lt;/div&gt;\n      &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n        &lt;Button variant=\&quot;primary\&quot; countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;secondary\&quot; countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;tertiary\&quot; countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;control\&quot; countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;link\&quot; countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n      &lt;/Flex&gt;\n      &lt;br /&gt;\n      &lt;div&gt;Unread disabled:&lt;/div&gt;\n      &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n        &lt;Button variant=\&quot;primary\&quot; isDisabled countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;secondary\&quot; isDisabled countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;tertiary\&quot; isDisabled countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;control\&quot; isDisabled countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;link\&quot; isDisabled countOptions={badgeCountObjectNotRead}&gt;\n          Issues\n        &lt;/Button&gt;\n      &lt;/Flex&gt;\n      &lt;br /&gt;\n      &lt;div&gt;Read:&lt;/div&gt;\n      &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n        &lt;Button variant=\&quot;primary\&quot; countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;secondary\&quot; countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;tertiary\&quot; countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;control\&quot; countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;link\&quot; countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n      &lt;/Flex&gt;\n      &lt;br /&gt;\n      &lt;div&gt;Read disabled:&lt;/div&gt;\n      &lt;Flex columnGap={{ default: &#39;columnGapSm&#39; }}&gt;\n        &lt;Button variant=\&quot;primary\&quot; isDisabled countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;secondary\&quot; isDisabled countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;tertiary\&quot; isDisabled countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;control\&quot; isDisabled countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n        &lt;Button variant=\&quot;link\&quot; isDisabled countOptions={badgeCountObjectRead}&gt;\n          Issues\n        &lt;/Button&gt;\n      &lt;/Flex&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-1748" data-pf-content="true" class="pf-v6-c-content--h3">Plain with no padding</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1762" data-pf-content="true" class="pf-v6-c-content--p">To display a plain/icon button inline with text, use <code>noPadding</code> prop in addition to <code>variant=&quot;plain&quot;</code>.</p>
-<astro-island uid="2g5l9w" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button } from &#39;@patternfly/react-core&#39;;\nimport QuestionCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/question-circle-icon&#39;;\n\nexport const ButtonPlainHasNoPadding: React.FunctionComponent = () =&gt; (\n  &lt;p&gt;\n    This is an example of a button\n    &lt;Button variant=\&quot;plain\&quot; hasNoPadding aria-label=\&quot;More info\&quot; icon={&lt;QuestionCircleIcon /&gt;} /&gt;\n    which is placed inline with text\n  &lt;/p&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>
+<astro-island uid="2g5l9w" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button } from &#39;@patternfly/react-core&#39;;\nimport QuestionCircleIcon from &#39;@patternfly/react-icons/dist/esm/icons/question-circle-icon&#39;;\n\nexport const ButtonPlainHasNoPadding: React.FunctionComponent = () =&gt; (\n  &lt;p&gt;\n    This is an example of a button\n    &lt;Button variant=\&quot;plain\&quot; hasNoPadding aria-label=\&quot;More info\&quot; icon={&lt;QuestionCircleIcon /&gt;} /&gt;\n    which is placed inline with text\n  &lt;/p&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>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1749" data-pf-content="true" class="pf-v6-c-content--h3">Stateful</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1763" data-pf-content="true" class="pf-v6-c-content--p">Stateful buttons are ideal for displaying the state of notifications. Use <code>variant=&quot;stateful&quot;</code> alongside with the <code>state</code> property, which can have these 3 values: <code>read</code>, <code>unread</code> (used as default) and <code>attention</code> (which means unread and requires attention).</p>
-<astro-island uid="2rCHjq" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Flex } from &#39;@patternfly/react-core&#39;;\nimport BellIcon from &#39;@patternfly/react-icons/dist/esm/icons/bell-icon&#39;;\n\nexport const ButtonStateful: React.FunctionComponent = () =&gt; (\n  &lt;Flex&gt;\n    &lt;div&gt;\n      &lt;div&gt;\n        &lt;strong&gt;Read&lt;/strong&gt;\n      &lt;/div&gt;\n      &lt;Button variant=\&quot;stateful\&quot; state=\&quot;read\&quot; icon={&lt;BellIcon /&gt;}&gt;\n        10 &lt;span className=\&quot;pf-v6-screen-reader\&quot;&gt;items&lt;/span&gt;\n      &lt;/Button&gt;\n    &lt;/div&gt;\n    &lt;div&gt;\n      &lt;div&gt;\n        &lt;strong&gt;Unread&lt;/strong&gt;\n      &lt;/div&gt;\n      &lt;Button variant=\&quot;stateful\&quot; state=\&quot;unread\&quot; icon={&lt;BellIcon /&gt;}&gt;\n        10 &lt;span className=\&quot;pf-v6-screen-reader\&quot;&gt;unread items&lt;/span&gt;\n      &lt;/Button&gt;\n    &lt;/div&gt;\n    &lt;div&gt;\n      &lt;div&gt;\n        &lt;strong&gt;Attention&lt;/strong&gt;\n      &lt;/div&gt;\n      &lt;Button variant=\&quot;stateful\&quot; state=\&quot;attention\&quot; icon={&lt;BellIcon /&gt;}&gt;\n        10 &lt;span className=\&quot;pf-v6-screen-reader\&quot;&gt;unread items, needs attention&lt;/span&gt;\n      &lt;/Button&gt;\n    &lt;/div&gt;\n  &lt;/Flex&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>
+<astro-island uid="2rCHjq" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Flex } from &#39;@patternfly/react-core&#39;;\nimport BellIcon from &#39;@patternfly/react-icons/dist/esm/icons/bell-icon&#39;;\n\nexport const ButtonStateful: React.FunctionComponent = () =&gt; (\n  &lt;Flex&gt;\n    &lt;div&gt;\n      &lt;div&gt;\n        &lt;strong&gt;Read&lt;/strong&gt;\n      &lt;/div&gt;\n      &lt;Button variant=\&quot;stateful\&quot; state=\&quot;read\&quot; icon={&lt;BellIcon /&gt;}&gt;\n        10 &lt;span className=\&quot;pf-v6-screen-reader\&quot;&gt;items&lt;/span&gt;\n      &lt;/Button&gt;\n    &lt;/div&gt;\n    &lt;div&gt;\n      &lt;div&gt;\n        &lt;strong&gt;Unread&lt;/strong&gt;\n      &lt;/div&gt;\n      &lt;Button variant=\&quot;stateful\&quot; state=\&quot;unread\&quot; icon={&lt;BellIcon /&gt;}&gt;\n        10 &lt;span className=\&quot;pf-v6-screen-reader\&quot;&gt;unread items&lt;/span&gt;\n      &lt;/Button&gt;\n    &lt;/div&gt;\n    &lt;div&gt;\n      &lt;div&gt;\n        &lt;strong&gt;Attention&lt;/strong&gt;\n      &lt;/div&gt;\n      &lt;Button variant=\&quot;stateful\&quot; state=\&quot;attention\&quot; icon={&lt;BellIcon /&gt;}&gt;\n        10 &lt;span className=\&quot;pf-v6-screen-reader\&quot;&gt;unread items, needs attention&lt;/span&gt;\n      &lt;/Button&gt;\n    &lt;/div&gt;\n  &lt;/Flex&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-1750" data-pf-content="true" class="pf-v6-c-content--h2">Using router links</h2>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1766" data-pf-content="true" class="pf-v6-c-content--p">Router links can be used for in-app linking in React environments to prevent page reloading. To use a <code>Link</code> component from a router package, you can follow our <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1751" data-pf-content="true" class="pf-v6-c-content--a">custom component example</a> and pass a callback to the <code>component</code> property of the <code>Button</code>:</p>
 <pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1764" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span>&lt;Button variant=&quot;link&quot; component={(props: any) =&gt; &lt;Link {...props} to=&quot;#&quot; /&gt;}&gt;</span></span>