@patternfly/patternfly-doc-core 1.15.4 → 1.15.5
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.
- package/.astro/content-modules.mjs +124 -124
- package/README.mdx +1 -0
- package/cli/cli.ts +54 -35
- package/{src → dist}/apiIndex.json +94 -94
- package/dist/cli/cli.js +48 -30
- package/dist/docs/_worker.js/chunks/fetch_CoXtH9RF.mjs +12 -0
- package/dist/docs/_worker.js/chunks/getConfig_DO3RhTb7.mjs +18 -0
- package/dist/docs/_worker.js/index.js +11 -9
- package/dist/docs/_worker.js/manifest_DIDAejNV.mjs +100 -0
- package/dist/docs/_worker.js/pages/api/_version_/_section_/_page_.astro.mjs +18 -10
- package/dist/docs/_worker.js/pages/api/_version_/_section_.astro.mjs +17 -8
- package/dist/docs/_worker.js/pages/api/_version_.astro.mjs +15 -8
- package/dist/docs/_worker.js/pages/api/openapi.json.astro.mjs +14 -3
- package/dist/docs/_worker.js/pages/api/versions.astro.mjs +11 -4
- package/dist/docs/_worker.js/pages/apiindex.json.astro.mjs +1 -0
- package/dist/docs/_worker.js/pages/props.astro.mjs +1 -16
- package/dist/docs/apiIndex.json +561 -0
- package/dist/docs/components/about-modal/html/index.html +8 -8
- package/dist/docs/components/about-modal/html-demos/index.html +4 -4
- package/dist/docs/components/about-modal/index.html +5 -5
- package/dist/docs/components/accordion/html/index.html +22 -22
- package/dist/docs/components/accordion/index.html +7 -7
- package/dist/docs/components/action-list/html/index.html +11 -11
- package/dist/docs/components/action-list/index.html +9 -9
- package/dist/docs/components/alert/html/index.html +31 -31
- package/dist/docs/components/alert/html-demos/index.html +10 -10
- package/dist/docs/components/alert/index.html +83 -83
- package/dist/docs/components/alert/react/index.html +83 -83
- package/dist/docs/components/avatar/html/index.html +16 -16
- package/dist/docs/components/avatar/index.html +8 -8
- package/dist/docs/components/avatar/react/index.html +5 -5
- package/dist/docs/components/back-to-top/html/index.html +9 -9
- package/dist/docs/components/back-to-top/html-demos/index.html +4 -4
- package/dist/docs/components/back-to-top/index.html +8 -8
- package/dist/docs/components/back-to-top/react/index.html +8 -8
- package/dist/docs/components/backdrop/html/index.html +11 -11
- package/dist/docs/components/backdrop/index.html +6 -6
- package/dist/docs/components/backdrop/react/index.html +6 -6
- package/dist/docs/components/background-image/html/index.html +11 -11
- package/dist/docs/components/background-image/index.html +6 -6
- package/dist/docs/components/background-image/react/index.html +6 -6
- package/dist/docs/components/badge/html/index.html +12 -12
- package/dist/docs/components/badge/index.html +8 -8
- package/dist/docs/components/badge/react/index.html +8 -8
- package/dist/docs/components/banner/html/index.html +12 -12
- package/dist/docs/components/banner/html-demos/index.html +9 -9
- package/dist/docs/components/banner/index.html +11 -11
- package/dist/docs/components/banner/react/index.html +11 -11
- package/dist/docs/components/brand/html/index.html +10 -10
- package/dist/docs/components/brand/index.html +6 -6
- package/dist/docs/components/breadcrumb/html/index.html +15 -15
- package/dist/docs/components/breadcrumb/index.html +6 -6
- package/dist/docs/components/breadcrumb/react/index.html +9 -9
- package/dist/docs/components/button/html/index.html +26 -26
- package/dist/docs/components/button/html-demos/index.html +5 -5
- package/dist/docs/components/button/index.html +34 -34
- package/dist/docs/components/button/react/index.html +37 -37
- package/dist/docs/components/calendar-month/html/index.html +9 -9
- package/dist/docs/components/calendar-month/index.html +6 -6
- package/dist/docs/components/calendar-month/react/index.html +9 -9
- package/dist/docs/components/card/html/index.html +37 -37
- package/dist/docs/components/card/html-demos/index.html +25 -25
- package/dist/docs/components/card/index.html +52 -52
- package/dist/docs/components/card/react/index.html +55 -55
- package/dist/docs/components/checkbox/html/index.html +21 -21
- package/dist/docs/components/checkbox/index.html +16 -16
- package/dist/docs/components/checkbox/react/index.html +13 -13
- package/dist/docs/components/chip/index.html +11 -11
- package/dist/docs/components/chip/react-deprecated/index.html +11 -11
- package/dist/docs/components/clipboard-copy/html/index.html +12 -12
- package/dist/docs/components/clipboard-copy/index.html +15 -15
- package/dist/docs/components/clipboard-copy/react/index.html +15 -15
- package/dist/docs/components/code-block/html/index.html +10 -10
- package/dist/docs/components/code-block/index.html +9 -9
- package/dist/docs/components/code-block/react/index.html +6 -6
- package/dist/docs/components/code-editor/html/index.html +16 -16
- package/dist/docs/components/code-editor/index.html +16 -16
- package/dist/docs/components/content/html/index.html +21 -21
- package/dist/docs/components/content/index.html +19 -19
- package/dist/docs/components/data-list/html/index.html +38 -38
- package/dist/docs/components/data-list/html-demos/index.html +12 -12
- package/dist/docs/components/data-list/index.html +21 -21
- package/dist/docs/components/date-picker/html/index.html +11 -11
- package/dist/docs/components/date-picker/index.html +14 -14
- package/dist/docs/components/date-picker/react/index.html +17 -17
- package/dist/docs/components/description-list/html/index.html +41 -41
- package/dist/docs/components/description-list/html-demos/index.html +8 -8
- package/dist/docs/components/description-list/index.html +36 -36
- package/dist/docs/components/description-list/react/index.html +39 -39
- package/dist/docs/components/divider/html/index.html +18 -18
- package/dist/docs/components/divider/index.html +11 -11
- package/dist/docs/components/drag-and-drop/html/index.html +11 -11
- package/dist/docs/components/drag-and-drop/index.html +9 -9
- package/dist/docs/components/drag-and-drop/react-deprecated/index.html +9 -9
- package/dist/docs/components/drawer/html/index.html +27 -27
- package/dist/docs/components/drawer/html-demos/index.html +16 -16
- package/dist/docs/components/drawer/index.html +25 -25
- package/dist/docs/components/dual-list-selector/html/index.html +13 -13
- package/dist/docs/components/dual-list-selector/index.html +17 -17
- package/dist/docs/components/empty-state/html/index.html +14 -14
- package/dist/docs/components/empty-state/index.html +13 -13
- package/dist/docs/components/empty-state/react/index.html +13 -13
- package/dist/docs/components/expandable-section/html/index.html +17 -17
- package/dist/docs/components/expandable-section/index.html +18 -18
- package/dist/docs/components/expandable-section/react/index.html +15 -15
- package/dist/docs/components/form/html/index.html +19 -19
- package/dist/docs/components/form/html-demos/index.html +6 -6
- package/dist/docs/components/form/index.html +19 -19
- package/dist/docs/components/form/react/index.html +19 -19
- package/dist/docs/components/form-control/html/index.html +12 -12
- package/dist/docs/components/form-control/index.html +12 -12
- package/dist/docs/components/form-select/index.html +9 -9
- package/dist/docs/components/form-select/react/index.html +9 -9
- package/dist/docs/components/helper-text/html/index.html +11 -11
- package/dist/docs/components/helper-text/html-demos/index.html +7 -7
- package/dist/docs/components/helper-text/index.html +9 -9
- package/dist/docs/components/hint/html/index.html +7 -7
- package/dist/docs/components/hint/index.html +8 -8
- package/dist/docs/components/hint/react/index.html +11 -11
- package/dist/docs/components/icon/html/index.html +16 -16
- package/dist/docs/components/icon/index.html +17 -17
- package/dist/docs/components/icon/react/index.html +20 -20
- package/dist/docs/components/inline-edit/html/index.html +29 -29
- package/dist/docs/components/inline-edit/index.html +29 -29
- package/dist/docs/components/input-group/html/index.html +12 -12
- package/dist/docs/components/input-group/index.html +12 -12
- package/dist/docs/components/input-group/react/index.html +12 -12
- package/dist/docs/components/jump-links/html/index.html +17 -17
- package/dist/docs/components/jump-links/html-demos/index.html +13 -13
- package/dist/docs/components/jump-links/index.html +9 -9
- package/dist/docs/components/jump-links/react/index.html +12 -12
- package/dist/docs/components/label/html/index.html +44 -44
- package/dist/docs/components/label/index.html +28 -28
- package/dist/docs/components/list/html/index.html +13 -13
- package/dist/docs/components/list/index.html +9 -9
- package/dist/docs/components/login-page/html/index.html +17 -17
- package/dist/docs/components/login-page/index.html +13 -13
- package/dist/docs/components/masthead/html/index.html +13 -13
- package/dist/docs/components/masthead/html-demos/index.html +20 -20
- package/dist/docs/components/masthead/index.html +18 -18
- package/dist/docs/components/menu/html/index.html +46 -46
- package/dist/docs/components/menu/index.html +68 -68
- package/dist/docs/components/menu/react/index.html +68 -68
- package/dist/docs/components/menu-toggle/html/index.html +35 -35
- package/dist/docs/components/menu-toggle/index.html +66 -66
- package/dist/docs/components/menu-toggle/react/index.html +66 -66
- package/dist/docs/components/modal/html/index.html +45 -45
- package/dist/docs/components/modal/html-demos/index.html +16 -16
- package/dist/docs/components/modal/index.html +41 -41
- package/dist/docs/components/multiple-file-upload/html/index.html +11 -11
- package/dist/docs/components/multiple-file-upload/index.html +26 -26
- package/dist/docs/components/navigation/html/index.html +26 -26
- package/dist/docs/components/navigation/html-demos/index.html +16 -16
- package/dist/docs/components/navigation/index.html +18 -18
- package/dist/docs/components/navigation/react/index.html +21 -21
- package/dist/docs/components/notification-badge/index.html +16 -16
- package/dist/docs/components/notification-badge/react/index.html +16 -16
- package/dist/docs/components/notification-drawer/html/index.html +9 -9
- package/dist/docs/components/notification-drawer/html-demos/index.html +13 -13
- package/dist/docs/components/notification-drawer/index.html +8 -8
- package/dist/docs/components/notification-drawer/react/index.html +8 -8
- package/dist/docs/components/number-input/html/index.html +12 -12
- package/dist/docs/components/number-input/index.html +11 -11
- package/dist/docs/components/number-input/react/index.html +14 -14
- package/dist/docs/components/overflow-menu/html/index.html +18 -18
- package/dist/docs/components/overflow-menu/index.html +9 -9
- package/dist/docs/components/overflow-menu/react/index.html +12 -12
- package/dist/docs/components/page/html/index.html +18 -18
- package/dist/docs/components/page/html-demos/index.html +32 -32
- package/dist/docs/components/page/index.html +50 -50
- package/dist/docs/components/page/react/index.html +50 -50
- package/dist/docs/components/pagination/html/index.html +20 -20
- package/dist/docs/components/pagination/index.html +17 -17
- package/dist/docs/components/pagination/react/index.html +14 -14
- package/dist/docs/components/panel/html/index.html +14 -14
- package/dist/docs/components/panel/html-demos/index.html +5 -5
- package/dist/docs/components/panel/index.html +22 -22
- package/dist/docs/components/password-generator/html-demos/index.html +4 -4
- package/dist/docs/components/password-generator/index.html +4 -4
- package/dist/docs/components/password-strength/html-demos/index.html +7 -7
- package/dist/docs/components/password-strength/index.html +7 -7
- package/dist/docs/components/popover/html/index.html +44 -44
- package/dist/docs/components/popover/index.html +20 -20
- package/dist/docs/components/popover/react/index.html +23 -23
- package/dist/docs/components/progress/html/index.html +31 -31
- package/dist/docs/components/progress/index.html +23 -23
- package/dist/docs/components/progress/react/index.html +23 -23
- package/dist/docs/components/progress-stepper/html/index.html +27 -27
- package/dist/docs/components/progress-stepper/index.html +16 -16
- package/dist/docs/components/progress-stepper/react/index.html +16 -16
- package/dist/docs/components/radio/html/index.html +20 -20
- package/dist/docs/components/radio/index.html +15 -15
- package/dist/docs/components/radio/react/index.html +15 -15
- package/dist/docs/components/sidebar/html/index.html +21 -21
- package/dist/docs/components/sidebar/index.html +17 -17
- package/dist/docs/components/simple-file-upload/html/index.html +15 -15
- package/dist/docs/components/simple-file-upload/index.html +32 -32
- package/dist/docs/components/simple-file-upload/react/index.html +32 -32
- package/dist/docs/components/simple-list/html/index.html +11 -11
- package/dist/docs/components/simple-list/index.html +9 -9
- package/dist/docs/components/simple-list/react/index.html +6 -6
- package/dist/docs/components/skeleton/html/index.html +13 -13
- package/dist/docs/components/skeleton/html-demos/index.html +3 -3
- package/dist/docs/components/skeleton/index.html +10 -10
- package/dist/docs/components/skeleton/react/index.html +10 -10
- package/dist/docs/components/skip-to-content/html/index.html +13 -13
- package/dist/docs/components/skip-to-content/index.html +6 -6
- package/dist/docs/components/skip-to-content/react/index.html +6 -6
- package/dist/docs/components/slider/html/index.html +14 -14
- package/dist/docs/components/slider/index.html +22 -22
- package/dist/docs/components/slider/react/index.html +22 -22
- package/dist/docs/components/spinner/html/index.html +16 -16
- package/dist/docs/components/spinner/index.html +9 -9
- package/dist/docs/components/spinner/react/index.html +6 -6
- package/dist/docs/components/switch/html/index.html +17 -17
- package/dist/docs/components/switch/index.html +12 -12
- package/dist/docs/components/switch/react/index.html +12 -12
- package/dist/docs/components/table/html/index.html +129 -129
- package/dist/docs/components/table/html-demos/index.html +33 -33
- package/dist/docs/components/table/index.html +129 -129
- package/dist/docs/components/tabs/html/index.html +67 -67
- package/dist/docs/components/tabs/html-demos/index.html +13 -13
- package/dist/docs/components/tabs/index.html +77 -77
- package/dist/docs/components/tabs/react/index.html +77 -77
- package/dist/docs/components/text-input/index.html +13 -13
- package/dist/docs/components/text-input/react/index.html +13 -13
- package/dist/docs/components/text-input-group/html/index.html +27 -27
- package/dist/docs/components/text-input-group/index.html +16 -16
- package/dist/docs/components/tile/html-deprecated/index.html +11 -11
- package/dist/docs/components/tile/index.html +23 -23
- package/dist/docs/components/tile/react-deprecated/index.html +26 -26
- package/dist/docs/components/time-picker/index.html +13 -13
- package/dist/docs/components/time-picker/react/index.html +13 -13
- package/dist/docs/components/timestamp/html/index.html +8 -8
- package/dist/docs/components/timestamp/index.html +21 -21
- package/dist/docs/components/timestamp/react/index.html +21 -21
- package/dist/docs/components/title/html/index.html +10 -10
- package/dist/docs/components/title/index.html +4 -4
- package/dist/docs/components/toggle-group/html/index.html +9 -9
- package/dist/docs/components/toggle-group/index.html +18 -18
- package/dist/docs/components/toolbar/html/index.html +55 -55
- package/dist/docs/components/toolbar/html-demos/index.html +12 -12
- package/dist/docs/components/toolbar/index.html +42 -42
- package/dist/docs/components/tooltip/html/index.html +17 -17
- package/dist/docs/components/tooltip/index.html +12 -12
- package/dist/docs/components/tree-view/html/index.html +21 -21
- package/dist/docs/components/tree-view/index.html +23 -23
- package/dist/docs/components/truncate/html/index.html +13 -13
- package/dist/docs/components/truncate/index.html +13 -13
- package/dist/docs/components/wizard/html/index.html +29 -29
- package/dist/docs/components/wizard/html-demos/index.html +22 -22
- package/dist/docs/components/wizard/index.html +32 -32
- package/dist/docs/components/wizard/react-deprecated/index.html +22 -22
- package/dist/docs/layouts/bullseye/html/index.html +11 -11
- package/dist/docs/layouts/bullseye/index.html +11 -11
- package/dist/docs/layouts/flex/html/index.html +87 -87
- package/dist/docs/layouts/flex/index.html +87 -87
- package/dist/docs/layouts/gallery/html/index.html +17 -17
- package/dist/docs/layouts/gallery/index.html +17 -17
- package/dist/docs/layouts/grid/html/index.html +22 -22
- package/dist/docs/layouts/grid/index.html +22 -22
- package/dist/docs/layouts/level/html/index.html +10 -10
- package/dist/docs/layouts/level/index.html +10 -10
- package/dist/docs/layouts/split/html/index.html +13 -13
- package/dist/docs/layouts/split/index.html +13 -13
- package/dist/docs/layouts/stack/html/index.html +12 -12
- package/dist/docs/layouts/stack/index.html +12 -12
- package/dist/docs/patterns/card-view/html-demos/index.html +4 -4
- package/dist/docs/patterns/card-view/index.html +4 -4
- package/dist/docs/patterns/dashboard/html-demos/index.html +4 -4
- package/dist/docs/patterns/dashboard/index.html +4 -4
- package/dist/docs/patterns/primary-detail/html-demos/index.html +17 -17
- package/dist/docs/patterns/primary-detail/index.html +17 -17
- package/dist/docs/utility-classes/accessibility/html/index.html +11 -11
- package/dist/docs/utility-classes/accessibility/index.html +11 -11
- package/dist/docs/utility-classes/alignment/html/index.html +7 -7
- package/dist/docs/utility-classes/alignment/index.html +7 -7
- package/dist/docs/utility-classes/background-color/html/index.html +9 -9
- package/dist/docs/utility-classes/background-color/index.html +9 -9
- package/dist/docs/utility-classes/box-shadow/html/index.html +12 -12
- package/dist/docs/utility-classes/box-shadow/index.html +12 -12
- package/dist/docs/utility-classes/display/html/index.html +18 -18
- package/dist/docs/utility-classes/display/index.html +18 -18
- package/dist/docs/utility-classes/flex/html/index.html +17 -17
- package/dist/docs/utility-classes/flex/index.html +17 -17
- package/dist/docs/utility-classes/float/html/index.html +7 -7
- package/dist/docs/utility-classes/float/index.html +7 -7
- package/dist/docs/utility-classes/sizing/html/index.html +28 -28
- package/dist/docs/utility-classes/sizing/index.html +28 -28
- package/dist/docs/utility-classes/spacing/html/index.html +12 -12
- package/dist/docs/utility-classes/spacing/index.html +12 -12
- package/dist/docs/utility-classes/text/html/index.html +18 -18
- package/dist/docs/utility-classes/text/index.html +18 -18
- package/jest.config.ts +1 -1
- package/package.json +5 -4
- package/src/pages/api/[version]/[section]/[page]/[tab].ts +11 -3
- package/src/pages/api/[version]/[section]/[page].ts +19 -11
- package/src/pages/api/[version]/[section].ts +18 -9
- package/src/pages/api/[version].ts +16 -9
- package/src/pages/api/openapi.json.ts +14 -3
- package/src/pages/api/versions.ts +11 -5
- package/src/pages/apiIndex.json.ts +27 -0
- package/src/utils/apiIndex/fetch.ts +20 -0
- package/src/utils/apiIndex/generate.ts +9 -5
- package/src/utils/apiIndex/get.ts +3 -1
- package/src/utils/getOutputDir.ts +19 -0
- package/src/utils/packageUtils.ts +5 -3
- package/tsconfig.json +9 -4
- package/dist/docs/_worker.js/chunks/apiIndex_rjiPwa_V.mjs +0 -9
- package/dist/docs/_worker.js/manifest_BOIk4wkr.mjs +0 -100
- /package/dist/docs/_worker.js/chunks/{_astro_data-layer-content_BIIrAXF8.mjs → _astro_data-layer-content_DGZXfKa-.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{content-modules_BnWiSXLh.mjs → content-modules_Db1avyLw.mjs} +0 -0
|
@@ -42,60 +42,60 @@
|
|
|
42
42
|
animation-fill-mode: both;
|
|
43
43
|
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"],
|
|
44
44
|
[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"],
|
|
45
|
-
[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="Z2eVQSE" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":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-424"><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="NBKVU" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":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-142"><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-425"><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-426"><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-142"><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="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"src/components/aboutmodal/examples/aboutmodal"],"data":[0,{"id":[0,"About modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/accordion/examples/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/actionlist/examples/actionlist"],"data":[0,{"id":[0,"Action list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/alert/examples/alert"],"data":[0,{"id":[0,"Alert"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/avatar/examples/avatar"],"data":[0,{"id":[0,"Avatar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backtotop/examples/backtotop"],"data":[0,{"id":[0,"Back to top"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backdrop/examples/backdrop"],"data":[0,{"id":[0,"Backdrop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backgroundimage/examples/backgroundimage"],"data":[0,{"id":[0,"Background image"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/badge/examples/badge"],"data":[0,{"id":[0,"Badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/banner/examples/banner"],"data":[0,{"id":[0,"Banner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/brand/examples/brand"],"data":[0,{"id":[0,"Brand"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/breadcrumb/examples/breadcrumb"],"data":[0,{"id":[0,"Breadcrumb"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/button/examples/button"],"data":[0,{"id":[0,"Button"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/calendarmonth/examples/calendarmonth"],"data":[0,{"id":[0,"Calendar month"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/card/examples/card"],"data":[0,{"id":[0,"Card"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/checkbox/examples/checkbox"],"data":[0,{"id":[0,"Checkbox"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/chip/examples/chip"],"data":[0,{"id":[0,"Chip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/clipboardcopy/examples/clipboardcopy"],"data":[0,{"id":[0,"Clipboard copy"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/codeblock/examples/codeblock"],"data":[0,{"id":[0,"Code block"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/codeeditor/examples/codeeditor"],"data":[0,{"id":[0,"Code editor"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/content/examples/content"],"data":[0,{"id":[0,"Content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datalist/examples/datalist"],"data":[0,{"id":[0,"Data list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datepicker/examples/datepicker"],"data":[0,{"id":[0,"Date picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/descriptionlist/examples/descriptionlist"],"data":[0,{"id":[0,"Description list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/divider/examples/divider"],"data":[0,{"id":[0,"Divider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/dragdrop/examples/dragdrop"],"data":[0,{"id":[0,"Drag and drop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/drawer/examples/drawer"],"data":[0,{"id":[0,"Drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/dropdown/examples/dropdown"],"data":[0,{"id":[0,"Dropdown"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/duallistselector/examples/duallistselector"],"data":[0,{"id":[0,"Dual list selector"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/emptystate/examples/emptystate"],"data":[0,{"id":[0,"Empty state"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/expandablesection/examples/expandablesection"],"data":[0,{"id":[0,"Expandable section"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/form/examples/form"],"data":[0,{"id":[0,"Form"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/formcontrol/examples/formcontrol"],"data":[0,{"id":[0,"Form control"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/formselect/examples/formselect"],"data":[0,{"id":[0,"Form select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/helpertext/examples/helpertext"],"data":[0,{"id":[0,"Helper text"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/hint/examples/hint"],"data":[0,{"id":[0,"Hint"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/icon/examples/icon"],"data":[0,{"id":[0,"Icon"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/inlineedit/examples/inlineedit"],"data":[0,{"id":[0,"Inline edit"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/inputgroup/examples/inputgroup"],"data":[0,{"id":[0,"Input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/jumplinks/examples/jumplinks"],"data":[0,{"id":[0,"Jump links"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/label/examples/label"],"data":[0,{"id":[0,"Label"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/list/examples/list"],"data":[0,{"id":[0,"List"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/loginpage/examples/loginpage"],"data":[0,{"id":[0,"Login page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/masthead/examples/masthead"],"data":[0,{"id":[0,"Masthead"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menu/examples/menu"],"data":[0,{"id":[0,"Menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menutoggle/examples/menutoggle"],"data":[0,{"id":[0,"Menu toggle"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/modal/examples/modal"],"data":[0,{"id":[0,"Modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/multiplefileupload/examples/multiplefileupload"],"data":[0,{"id":[0,"Multiple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/nav/examples/nav"],"data":[0,{"id":[0,"Navigation"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationbadge/examples/notificationbadge"],"data":[0,{"id":[0,"Notification badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationdrawer/examples/notificationdrawer"],"data":[0,{"id":[0,"Notification drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/numberinput/examples/numberinput"],"data":[0,{"id":[0,"Number input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/overflowmenu/examples/overflowmenu"],"data":[0,{"id":[0,"Overflow menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/page/examples/page"],"data":[0,{"id":[0,"Page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/pagination/examples/pagination"],"data":[0,{"id":[0,"Pagination"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/panel/examples/panel"],"data":[0,{"id":[0,"Panel"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordgenerator/examples/passwordgenerator"],"data":[0,{"id":[0,"Password generator"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordstrength/examples/passwordstrength"],"data":[0,{"id":[0,"Password strength"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/popover/examples/popover"],"data":[0,{"id":[0,"Popover"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progress/examples/progress"],"data":[0,{"id":[0,"Progress"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progressstepper/examples/progressstepper"],"data":[0,{"id":[0,"Progress stepper"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/radio/examples/radio"],"data":[0,{"id":[0,"Radio"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/searchinput/examples/searchinput"],"data":[0,{"id":[0,"Search input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/select/examples/select"],"data":[0,{"id":[0,"Select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/sidebar/examples/sidebar"],"data":[0,{"id":[0,"Sidebar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/fileupload/examples/fileupload"],"data":[0,{"id":[0,"Simple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/simplelist/examples/simplelist"],"data":[0,{"id":[0,"Simple list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skeleton/examples/skeleton"],"data":[0,{"id":[0,"Skeleton"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skiptocontent/examples/skiptocontent"],"data":[0,{"id":[0,"Skip to content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/slider/examples/slider"],"data":[0,{"id":[0,"Slider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/spinner/examples/spinner"],"data":[0,{"id":[0,"Spinner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/switch/examples/switch"],"data":[0,{"id":[0,"Switch"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/table/examples/table"],"data":[0,{"id":[0,"Table"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tabs/examples/tabs"],"data":[0,{"id":[0,"Tabs"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textarea/examples/textarea"],"data":[0,{"id":[0,"Text area"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinput/examples/textinput"],"data":[0,{"id":[0,"Text input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinputgroup/examples/textinputgroup"],"data":[0,{"id":[0,"Text input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/tile/examples/tile"],"data":[0,{"id":[0,"Tile"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timepicker/examples/timepicker"],"data":[0,{"id":[0,"Time picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timestamp/examples/timestamp"],"data":[0,{"id":[0,"Timestamp"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/title/examples/title"],"data":[0,{"id":[0,"Title"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/togglegroup/examples/togglegroup"],"data":[0,{"id":[0,"Toggle group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/toolbar/examples/toolbar"],"data":[0,{"id":[0,"Toolbar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tooltip/examples/tooltip"],"data":[0,{"id":[0,"Tooltip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/treeview/examples/treeview"],"data":[0,{"id":[0,"Tree view"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/truncate/examples/truncate"],"data":[0,{"id":[0,"Truncate"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/wizard/examples/wizard"],"data":[0,{"id":[0,"Wizard"],"section":[0,"components"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines"],"data":[0,{"id":[0,"Quick starts"],"section":[0,"extensions"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/layouts/bullseye/examples/bullseye"],"data":[0,{"id":[0,"Bullseye"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/gallery/examples/gallery"],"data":[0,{"id":[0,"Gallery"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/grid/examples/grid"],"data":[0,{"id":[0,"Grid"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/level/examples/level"],"data":[0,{"id":[0,"Level"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/split/examples/split"],"data":[0,{"id":[0,"Split"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/stack/examples/stack"],"data":[0,{"id":[0,"Stack"],"section":[0,"layouts"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/demos/cardview/examples/cardview"],"data":[0,{"id":[0,"Card view"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/dashboard/examples/dashboard"],"data":[0,{"id":[0,"Dashboard"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/primarydetail/examples/primarydetail"],"data":[0,{"id":[0,"Primary-detail"],"section":[0,"patterns"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/utilities/accessibility/examples/accessibility"],"data":[0,{"id":[0,"Accessibility"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/alignment/examples/alignment"],"data":[0,{"id":[0,"Alignment"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/backgroundcolor/examples/backgroundcolor"],"data":[0,{"id":[0,"Background color"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/boxshadow/examples/box-shadow"],"data":[0,{"id":[0,"Box shadow"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/display/examples/display"],"data":[0,{"id":[0,"Display"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/float/examples/float"],"data":[0,{"id":[0,"Float"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/sizing/examples/sizing"],"data":[0,{"id":[0,"Sizing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/spacing/examples/spacing"],"data":[0,{"id":[0,"Spacing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/text/examples/text"],"data":[0,{"id":[0,"Text"],"section":[0,"utility-classes"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" 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"> <a class="pf-v6-c-tabs__link" href="/components/button/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/button/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/button/html-demos"> HTML demos </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"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2372" data-pf-content="true" class="pf-v6-c-content--p">import ’./Button.css’</p>
|
|
46
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
47
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
45
|
+
[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="Z2oCq9Y" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":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-376"><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="ZTfB9H" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":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-126"><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-377"><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-378"><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-126"><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="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"src/components/aboutmodal/examples/aboutmodal"],"data":[0,{"id":[0,"About modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/accordion/examples/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/actionlist/examples/actionlist"],"data":[0,{"id":[0,"Action list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/alert/examples/alert"],"data":[0,{"id":[0,"Alert"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/avatar/examples/avatar"],"data":[0,{"id":[0,"Avatar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backtotop/examples/backtotop"],"data":[0,{"id":[0,"Back to top"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backdrop/examples/backdrop"],"data":[0,{"id":[0,"Backdrop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backgroundimage/examples/backgroundimage"],"data":[0,{"id":[0,"Background image"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/badge/examples/badge"],"data":[0,{"id":[0,"Badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/banner/examples/banner"],"data":[0,{"id":[0,"Banner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/brand/examples/brand"],"data":[0,{"id":[0,"Brand"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/breadcrumb/examples/breadcrumb"],"data":[0,{"id":[0,"Breadcrumb"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/button/examples/button"],"data":[0,{"id":[0,"Button"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/calendarmonth/examples/calendarmonth"],"data":[0,{"id":[0,"Calendar month"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/card/examples/card"],"data":[0,{"id":[0,"Card"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/checkbox/examples/checkbox"],"data":[0,{"id":[0,"Checkbox"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/chip/examples/chip"],"data":[0,{"id":[0,"Chip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/clipboardcopy/examples/clipboardcopy"],"data":[0,{"id":[0,"Clipboard copy"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/codeblock/examples/codeblock"],"data":[0,{"id":[0,"Code block"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/codeeditor/examples/codeeditor"],"data":[0,{"id":[0,"Code editor"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/content/examples/content"],"data":[0,{"id":[0,"Content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datalist/examples/datalist"],"data":[0,{"id":[0,"Data list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datepicker/examples/datepicker"],"data":[0,{"id":[0,"Date picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/descriptionlist/examples/descriptionlist"],"data":[0,{"id":[0,"Description list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/divider/examples/divider"],"data":[0,{"id":[0,"Divider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/dragdrop/examples/dragdrop"],"data":[0,{"id":[0,"Drag and drop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/drawer/examples/drawer"],"data":[0,{"id":[0,"Drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/dropdown/examples/dropdown"],"data":[0,{"id":[0,"Dropdown"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/duallistselector/examples/duallistselector"],"data":[0,{"id":[0,"Dual list selector"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/emptystate/examples/emptystate"],"data":[0,{"id":[0,"Empty state"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/expandablesection/examples/expandablesection"],"data":[0,{"id":[0,"Expandable section"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/form/examples/form"],"data":[0,{"id":[0,"Form"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/formcontrol/examples/formcontrol"],"data":[0,{"id":[0,"Form control"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/formselect/examples/formselect"],"data":[0,{"id":[0,"Form select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/helpertext/examples/helpertext"],"data":[0,{"id":[0,"Helper text"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/hint/examples/hint"],"data":[0,{"id":[0,"Hint"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/icon/examples/icon"],"data":[0,{"id":[0,"Icon"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/inlineedit/examples/inlineedit"],"data":[0,{"id":[0,"Inline edit"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/inputgroup/examples/inputgroup"],"data":[0,{"id":[0,"Input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/jumplinks/examples/jumplinks"],"data":[0,{"id":[0,"Jump links"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/label/examples/label"],"data":[0,{"id":[0,"Label"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/list/examples/list"],"data":[0,{"id":[0,"List"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/loginpage/examples/loginpage"],"data":[0,{"id":[0,"Login page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/masthead/examples/masthead"],"data":[0,{"id":[0,"Masthead"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menu/examples/menu"],"data":[0,{"id":[0,"Menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menutoggle/examples/menutoggle"],"data":[0,{"id":[0,"Menu toggle"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/modal/examples/modal"],"data":[0,{"id":[0,"Modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/multiplefileupload/examples/multiplefileupload"],"data":[0,{"id":[0,"Multiple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/nav/examples/nav"],"data":[0,{"id":[0,"Navigation"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationbadge/examples/notificationbadge"],"data":[0,{"id":[0,"Notification badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationdrawer/examples/notificationdrawer"],"data":[0,{"id":[0,"Notification drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/numberinput/examples/numberinput"],"data":[0,{"id":[0,"Number input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/overflowmenu/examples/overflowmenu"],"data":[0,{"id":[0,"Overflow menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/page/examples/page"],"data":[0,{"id":[0,"Page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/pagination/examples/pagination"],"data":[0,{"id":[0,"Pagination"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/panel/examples/panel"],"data":[0,{"id":[0,"Panel"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordgenerator/examples/passwordgenerator"],"data":[0,{"id":[0,"Password generator"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordstrength/examples/passwordstrength"],"data":[0,{"id":[0,"Password strength"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/popover/examples/popover"],"data":[0,{"id":[0,"Popover"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progress/examples/progress"],"data":[0,{"id":[0,"Progress"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progressstepper/examples/progressstepper"],"data":[0,{"id":[0,"Progress stepper"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/radio/examples/radio"],"data":[0,{"id":[0,"Radio"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/searchinput/examples/searchinput"],"data":[0,{"id":[0,"Search input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/select/examples/select"],"data":[0,{"id":[0,"Select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/sidebar/examples/sidebar"],"data":[0,{"id":[0,"Sidebar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/fileupload/examples/fileupload"],"data":[0,{"id":[0,"Simple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/simplelist/examples/simplelist"],"data":[0,{"id":[0,"Simple list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skeleton/examples/skeleton"],"data":[0,{"id":[0,"Skeleton"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skiptocontent/examples/skiptocontent"],"data":[0,{"id":[0,"Skip to content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/slider/examples/slider"],"data":[0,{"id":[0,"Slider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/spinner/examples/spinner"],"data":[0,{"id":[0,"Spinner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/switch/examples/switch"],"data":[0,{"id":[0,"Switch"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/table/examples/table"],"data":[0,{"id":[0,"Table"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tabs/examples/tabs"],"data":[0,{"id":[0,"Tabs"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textarea/examples/textarea"],"data":[0,{"id":[0,"Text area"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinput/examples/textinput"],"data":[0,{"id":[0,"Text input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinputgroup/examples/textinputgroup"],"data":[0,{"id":[0,"Text input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/tile/examples/tile"],"data":[0,{"id":[0,"Tile"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timepicker/examples/timepicker"],"data":[0,{"id":[0,"Time picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timestamp/examples/timestamp"],"data":[0,{"id":[0,"Timestamp"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/title/examples/title"],"data":[0,{"id":[0,"Title"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/togglegroup/examples/togglegroup"],"data":[0,{"id":[0,"Toggle group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/toolbar/examples/toolbar"],"data":[0,{"id":[0,"Toolbar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tooltip/examples/tooltip"],"data":[0,{"id":[0,"Tooltip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/treeview/examples/treeview"],"data":[0,{"id":[0,"Tree view"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/truncate/examples/truncate"],"data":[0,{"id":[0,"Truncate"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/wizard/examples/wizard"],"data":[0,{"id":[0,"Wizard"],"section":[0,"components"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines"],"data":[0,{"id":[0,"Quick starts"],"section":[0,"extensions"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/layouts/bullseye/examples/bullseye"],"data":[0,{"id":[0,"Bullseye"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/gallery/examples/gallery"],"data":[0,{"id":[0,"Gallery"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/grid/examples/grid"],"data":[0,{"id":[0,"Grid"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/level/examples/level"],"data":[0,{"id":[0,"Level"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/split/examples/split"],"data":[0,{"id":[0,"Split"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/stack/examples/stack"],"data":[0,{"id":[0,"Stack"],"section":[0,"layouts"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/demos/cardview/examples/cardview"],"data":[0,{"id":[0,"Card view"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/dashboard/examples/dashboard"],"data":[0,{"id":[0,"Dashboard"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/primarydetail/examples/primarydetail"],"data":[0,{"id":[0,"Primary-detail"],"section":[0,"patterns"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/utilities/accessibility/examples/accessibility"],"data":[0,{"id":[0,"Accessibility"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/alignment/examples/alignment"],"data":[0,{"id":[0,"Alignment"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/backgroundcolor/examples/backgroundcolor"],"data":[0,{"id":[0,"Background color"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/boxshadow/examples/box-shadow"],"data":[0,{"id":[0,"Box shadow"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/display/examples/display"],"data":[0,{"id":[0,"Display"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/float/examples/float"],"data":[0,{"id":[0,"Float"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/sizing/examples/sizing"],"data":[0,{"id":[0,"Sizing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/spacing/examples/spacing"],"data":[0,{"id":[0,"Spacing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/text/examples/text"],"data":[0,{"id":[0,"Text"],"section":[0,"utility-classes"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" 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"> <a class="pf-v6-c-tabs__link" href="/components/button/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/button/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/button/html-demos"> HTML demos </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"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2059" data-pf-content="true" class="pf-v6-c-content--p">import ’./Button.css’</p>
|
|
46
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2060" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
|
|
47
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2061" data-pf-content="true" class="pf-v6-c-content--h3">Variations</h3>
|
|
48
48
|
|
|
49
49
|
<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="1Itb39" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<button class=\"pf-v6-c-button pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Primary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-danger pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Secondary danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-tertiary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-warning\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Warning</span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Link</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-link pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Link danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Inline link</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-plain\" type=\"button\" aria-label=\"Remove\">\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-control\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Control</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-control\"\n type=\"button\"\n aria-label=\"Copy input\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<div>\n <strong>Icon</strong>\n</div>\n<button class=\"pf-v6-c-button pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Primary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-danger pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Secondary danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-tertiary\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-warning\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Warning</span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Link</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-link pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Link danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Inline link</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-plain\" type=\"button\" aria-label=\"Remove\">\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-control\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Control</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-control\"\n type=\"button\"\n aria-label=\"Copy input\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<div>\n <strong>Icon end</strong>\n</div>\n<button class=\"pf-v6-c-button pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Primary</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-danger pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Secondary danger</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-tertiary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Danger</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-warning\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Warning</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Link</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-link pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Link danger</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Inline link</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-plain\" type=\"button\" aria-label=\"Remove\">\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-control\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Control</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-control\"\n type=\"button\"\n aria-label=\"Copy input\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\n </span>\n</button>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
50
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
50
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2062" data-pf-content="true" class="pf-v6-c-content--h3">Clicked buttons</h3>
|
|
51
51
|
|
|
52
52
|
<astro-island uid="11xs0M" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<button class=\"pf-v6-c-button pf-m-clicked pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Primary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-clicked pf-m-danger pf-m-secondary\"\n type=\"button\"\n>\n <span class=\"pf-v6-c-button__text\">Secondary danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-tertiary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-warning\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Warning</span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Link</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Link danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Inline link</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-clicked pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-control\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Control</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-clicked pf-m-control\"\n type=\"button\"\n aria-label=\"Copy input\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<div>\n <strong>Icon</strong>\n</div>\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Primary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-clicked pf-m-danger pf-m-secondary\"\n type=\"button\"\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Secondary danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-tertiary\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-warning\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Warning</span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Link</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Link danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Inline link</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-clicked pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-control\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Control</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-clicked pf-m-control\"\n type=\"button\"\n aria-label=\"Copy input\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<div>\n <strong>Icon end</strong>\n</div>\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Primary</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-clicked pf-m-danger pf-m-secondary\"\n type=\"button\"\n>\n <span class=\"pf-v6-c-button__text\">Secondary danger</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-tertiary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Danger</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-warning\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Warning</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Link</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Link danger</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Inline link</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-clicked pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-clicked pf-m-control\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Control</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-clicked pf-m-control\"\n type=\"button\"\n aria-label=\"Copy input\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\n </span>\n</button>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
53
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
53
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2063" data-pf-content="true" class="pf-v6-c-content--h3">Small buttons</h3>
|
|
54
54
|
|
|
55
55
|
<astro-island uid="Z1cT0Ta" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<button class=\"pf-v6-c-button pf-m-small pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Primary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-small pf-m-danger pf-m-secondary\"\n type=\"button\"\n>\n <span class=\"pf-v6-c-button__text\">Secondary danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-tertiary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-warning\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Warning</span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Link</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-link pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Link danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Inline link</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-small pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-control\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Control</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-small pf-m-control\"\n type=\"button\"\n aria-label=\"Copy input\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<div>\n <strong>Icon</strong>\n</div>\n<button class=\"pf-v6-c-button pf-m-small pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Primary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-small pf-m-danger pf-m-secondary\"\n type=\"button\"\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Secondary danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-tertiary\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-warning\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Warning</span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Link</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-link pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Link danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Inline link</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-small pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-control\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Control</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-small pf-m-control\"\n type=\"button\"\n aria-label=\"Copy input\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<div>\n <strong>Icon end</strong>\n</div>\n<button class=\"pf-v6-c-button pf-m-small pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Primary</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-small pf-m-danger pf-m-secondary\"\n type=\"button\"\n>\n <span class=\"pf-v6-c-button__text\">Secondary danger</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-tertiary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Danger</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-warning\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Warning</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Link</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-link pf-m-danger\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Link danger</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Inline link</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-small pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-small pf-m-control\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Control</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-small pf-m-control\"\n type=\"button\"\n aria-label=\"Copy input\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\n </span>\n</button>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
56
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
56
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2064" data-pf-content="true" class="pf-v6-c-content--h3">Disabled</h3>
|
|
57
57
|
|
|
58
58
|
<astro-island uid="2r3CL0" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<button class=\"pf-v6-c-button pf-m-primary\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Primary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-secondary\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-danger pf-m-secondary\"\n type=\"button\"\n disabled\n>\n <span class=\"pf-v6-c-button__text\">Secondary danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-tertiary\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-danger\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-warning\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Warning</span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-link\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Link</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-link pf-m-danger\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Link danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Inline link</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n disabled\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-control\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Control</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-control\"\n type=\"button\"\n aria-label=\"Copy input\"\n disabled\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<div>\n <strong>Icon</strong>\n</div>\n<button class=\"pf-v6-c-button pf-m-primary\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Primary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-secondary\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-danger pf-m-secondary\"\n type=\"button\"\n disabled\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Secondary danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-tertiary\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-danger\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-warning\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Warning</span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-link\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Link</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-link pf-m-danger\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Link danger</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Inline link</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n disabled\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-control\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Control</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-control\"\n type=\"button\"\n aria-label=\"Copy input\"\n disabled\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<div>\n <strong>Icon end</strong>\n</div>\n<button class=\"pf-v6-c-button pf-m-primary\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Primary</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-secondary\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-danger pf-m-secondary\"\n type=\"button\"\n disabled\n>\n <span class=\"pf-v6-c-button__text\">Secondary danger</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-tertiary\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-danger\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Danger</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-warning\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Warning</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-link\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Link</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-link pf-m-danger\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Link danger</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Inline link</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n disabled\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button class=\"pf-v6-c-button pf-m-control\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Control</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-control\"\n type=\"button\"\n aria-label=\"Copy input\"\n disabled\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\n </span>\n</button>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
59
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
59
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2065" data-pf-content="true" class="pf-v6-c-content--h3">Aria-disabled</h3>
|
|
60
60
|
|
|
61
61
|
<astro-island uid="BtAbe" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-primary\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Primary</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-secondary\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Secondary danger</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-tertiary\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-danger\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Danger</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-warning\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Warning</span>\n</button>\n\n<br />\n<br />\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-link\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Link</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-link pf-m-danger\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Link danger</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-inline pf-m-link\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Inline link</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-control\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Control</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-control\"\n type=\"button\"\n aria-label=\"Copy input\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<div>\n <strong>Icon</strong>\n</div>\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-primary\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Primary</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-secondary\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Secondary danger</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-tertiary\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-danger\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Danger</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-warning\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Warning</span>\n</button>\n\n<br />\n<br />\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-link\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Link</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-link pf-m-danger\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Link danger</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-inline pf-m-link\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Inline link</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-control\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">Control</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-control\"\n type=\"button\"\n aria-label=\"Copy input\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<div>\n <strong>Icon end</strong>\n</div>\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-primary\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Primary</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-secondary\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Secondary danger</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-tertiary\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-danger\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Danger</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-warning\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Warning</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-link\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Link</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-link pf-m-danger\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Link danger</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-inline pf-m-link\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Inline link</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"Remove\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<br />\n<br />\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-control\"\n type=\"button\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__text\">Control</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-control\"\n type=\"button\"\n aria-label=\"Copy input\"\n aria-disabled=\"true\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-copy\" aria-hidden=\"true\"></i>\n </span>\n</button>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
62
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
62
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2066" data-pf-content="true" class="pf-v6-c-content--h3">Links as buttons</h3>
|
|
63
63
|
|
|
64
64
|
<astro-island uid="ZzQwR0" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<a\n class=\"pf-v6-c-button pf-m-primary\"\n href=\"https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples\"\n>\n <span class=\"pf-v6-c-button__text\">Primary link to W3.org</span>\n</a>\n\n<a\n class=\"pf-v6-c-button pf-m-secondary\"\n aria-label=\"Read more about button documentation\"\n href=\"#overview\"\n>\n <span class=\"pf-v6-c-button__text\">Secondary link to anchor</span>\n</a>\n\n<a\n class=\"pf-v6-c-button pf-m-danger pf-m-secondary\"\n aria-label=\"Read more about button documentation\"\n href=\"#overview\"\n>\n <span class=\"pf-v6-c-button__text\">Secondary danger link to anchor</span>\n</a>\n\n<a\n class=\"pf-v6-c-button pf-m-tertiary pf-m-disabled\"\n href=\"https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples\"\n aria-disabled=\"true\"\n tabindex=\"-1\"\n>\n <span class=\"pf-v6-c-button__text\">Tertiary link to W3.org</span>\n</a>\n\n<a\n class=\"pf-v6-c-button pf-m-link\"\n href=\"https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples\"\n>\n <span class=\"pf-v6-c-button__text\">Link to W3.org</span>\n</a>\n\n<a\n class=\"pf-v6-c-button pf-m-link pf-m-danger\"\n href=\"https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples\"\n>\n <span class=\"pf-v6-c-button__text\">Link danger to W3.org</span>\n</a>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
65
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
65
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2067" data-pf-content="true" class="pf-v6-c-content--h3">Inline link as span</h3>
|
|
66
66
|
|
|
67
67
|
<astro-island uid="1xb2Ye" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<strong>Plain</strong>\n<br />\n<span\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Remove\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</span>\n<br />\n<br />\n<strong>Plain no padding</strong>\n<br />\n<span\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Remove\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n</span>\n<br />\n<br />\n<strong>Inline link</strong>\n<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n<span\n class=\"pf-v6-c-button pf-m-inline pf-m-link\"\n type=\"button\"\n role=\"button\"\n tabindex=\"0\"\n>\n <span\n class=\"pf-v6-c-button__text\"\n >This is long button text that needs to be a span so that it will wrap inline with the text around it.</span>\n</span>\nSed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum velit elementum non.\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
68
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
68
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2068" data-pf-content="true" class="pf-v6-c-content--h3">Block level</h3>
|
|
69
69
|
|
|
70
70
|
<astro-island uid="Jsf4Q" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<button class=\"pf-v6-c-button pf-m-block pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Block level button</span>\n</button>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
71
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
71
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2069" data-pf-content="true" class="pf-v6-c-content--h3">Types</h3>
|
|
72
72
|
|
|
73
73
|
<astro-island uid="Z1nepno" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<button class=\"pf-v6-c-button pf-m-primary\" type=\"submit\">\n <span class=\"pf-v6-c-button__text\">Submit</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-primary\" type=\"reset\">\n <span class=\"pf-v6-c-button__text\">Reset</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Default</span>\n</button>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
74
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
74
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2070" data-pf-content="true" class="pf-v6-c-content--h3">Call to action</h3>
|
|
75
75
|
|
|
76
76
|
<astro-island uid="2vFjhw" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<button class=\"pf-v6-c-button pf-m-display-lg pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Call to action</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-display-lg pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Call to action</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-display-lg pf-m-tertiary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Call to action</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-display-lg pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Call to action</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-display-lg pf-m-inline pf-m-link\"\n type=\"button\"\n>\n <span class=\"pf-v6-c-button__text\">Call to action</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"></i>\n </span>\n</button>\n<br />\n<br />\n<strong>disabled</strong>\n<br />\n<button\n class=\"pf-v6-c-button pf-m-display-lg pf-m-primary\"\n type=\"button\"\n disabled\n>\n <span class=\"pf-v6-c-button__text\">Call to action</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-display-lg pf-m-secondary\"\n type=\"button\"\n disabled\n>\n <span class=\"pf-v6-c-button__text\">Call to action</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-display-lg pf-m-tertiary\"\n type=\"button\"\n disabled\n>\n <span class=\"pf-v6-c-button__text\">Call to action</span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-display-lg pf-m-link\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">Call to action</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-display-lg pf-m-inline pf-m-link\"\n type=\"button\"\n disabled\n>\n <span class=\"pf-v6-c-button__text\">Call to action</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"></i>\n </span>\n</button>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
77
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
77
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2071" data-pf-content="true" class="pf-v6-c-content--h3">Progress</h3>
|
|
78
78
|
|
|
79
79
|
<astro-island uid="2w0zX9" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<button class=\"pf-v6-c-button pf-m-progress pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Primary loader</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-primary\"\n type=\"button\"\n>\n <span class=\"pf-v6-c-button__progress\">\n <svg\n class=\"pf-v6-c-spinner pf-m-md\"\n role=\"progressbar\"\n viewBox=\"0 0 100 100\"\n aria-label=\"Loading...\"\n >\n <circle class=\"pf-v6-c-spinner__path\" cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" />\n </svg>\n </span>\n\n <span class=\"pf-v6-c-button__text\">Primary loading</span>\n</button>\n<br />\n<button class=\"pf-v6-c-button pf-m-progress pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Secondary loader</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-secondary\"\n type=\"button\"\n>\n <span class=\"pf-v6-c-button__progress\">\n <svg\n class=\"pf-v6-c-spinner pf-m-md\"\n role=\"progressbar\"\n viewBox=\"0 0 100 100\"\n aria-label=\"Loading...\"\n >\n <circle class=\"pf-v6-c-spinner__path\" cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" />\n </svg>\n </span>\n\n <span class=\"pf-v6-c-button__text\">Secondary loading</span>\n</button>\n<br />\n<button class=\"pf-v6-c-button pf-m-plain\" type=\"button\" aria-label=\"Upload\">\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-upload\" aria-hidden=\"true\"></i>\n </span>\n</button>\n\n<button class=\"pf-v6-c-button pf-m-in-progress pf-m-plain\" type=\"button\">\n <span class=\"pf-v6-c-button__progress\">\n <svg\n class=\"pf-v6-c-spinner pf-m-md\"\n role=\"progressbar\"\n viewBox=\"0 0 100 100\"\n aria-label=\"Uploading...\"\n >\n <circle class=\"pf-v6-c-spinner__path\" cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" />\n </svg>\n </span>\n\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-upload\" aria-hidden=\"true\"></i>\n </span>\n</button>\n<br />\n<button\n class=\"pf-v6-c-button pf-m-progress pf-m-inline pf-m-link\"\n type=\"button\"\n>\n <span class=\"pf-v6-c-button__text\">Inline loader</span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-inline pf-m-link\"\n type=\"button\"\n>\n <span class=\"pf-v6-c-button__progress\">\n <svg\n class=\"pf-v6-c-spinner pf-m-inline\"\n role=\"progressbar\"\n viewBox=\"0 0 100 100\"\n aria-label=\"Loading...\"\n >\n <circle class=\"pf-v6-c-spinner__path\" cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" />\n </svg>\n </span>\n\n <span class=\"pf-v6-c-button__text\">Inline loading</span>\n</button>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
80
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
80
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2072" data-pf-content="true" class="pf-v6-c-content--h3">Counts</h3>
|
|
81
81
|
|
|
82
82
|
<astro-island uid="ZG162q" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<button class=\"pf-v6-c-button pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">View issues</span>\n <span class=\"pf-v6-c-button__count\">\n <span class=\"pf-v6-c-badge pf-m-unread\">\n 7\n <span class=\"pf-v6-screen-reader\">unread messages</span>\n </span>\n </span>\n</button>\n<button class=\"pf-v6-c-button pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">View issues</span>\n <span class=\"pf-v6-c-button__count\">\n <span class=\"pf-v6-c-badge pf-m-read\">7</span>\n </span>\n</button>\n<button class=\"pf-v6-c-button pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">View issues</span>\n <span class=\"pf-v6-c-button__count\">\n <span class=\"pf-v6-c-badge pf-m-unread\">\n 7\n <span class=\"pf-v6-screen-reader\">unread messages</span>\n </span>\n </span>\n</button>\n<button class=\"pf-v6-c-button pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">View issues</span>\n <span class=\"pf-v6-c-button__count\">\n <span class=\"pf-v6-c-badge pf-m-read\">7</span>\n </span>\n</button>\n<br />\n<strong>disabled</strong>\n<br />\n<button class=\"pf-v6-c-button pf-m-primary\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">View issues</span>\n <span class=\"pf-v6-c-button__count\">\n <span class=\"pf-v6-c-badge pf-m-unread pf-m-disabled\">7</span>\n </span>\n</button>\n<button class=\"pf-v6-c-button pf-m-primary\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">View issues</span>\n <span class=\"pf-v6-c-button__count\">\n <span class=\"pf-v6-c-badge pf-m-read pf-m-disabled\">7</span>\n </span>\n</button>\n<button class=\"pf-v6-c-button pf-m-link\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">View issues</span>\n <span class=\"pf-v6-c-button__count\">\n <span class=\"pf-v6-c-badge pf-m-unread pf-m-disabled\">7</span>\n </span>\n</button>\n<button class=\"pf-v6-c-button pf-m-link\" type=\"button\" disabled>\n <span class=\"pf-v6-c-button__text\">View issues</span>\n <span class=\"pf-v6-c-button__count\">\n <span class=\"pf-v6-c-badge pf-m-read pf-m-disabled\">7</span>\n </span>\n</button>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
83
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
83
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2073" data-pf-content="true" class="pf-v6-c-content--h3">Plain with no padding</h3>
|
|
84
84
|
|
|
85
85
|
<astro-island uid="kMSV9" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"For when a plain/icon button is placed inline with text\n<button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-label=\"More info\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-question-circle\" aria-hidden=\"true\"></i>\n </span>\n</button>\n.\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
86
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
86
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2074" data-pf-content="true" class="pf-v6-c-content--h3">Stateful</h3>
|
|
87
87
|
|
|
88
88
|
<astro-island uid="1jyho0" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<strong>Read</strong>\n<br />\n<button class=\"pf-v6-c-button pf-m-read pf-m-stateful\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">\n 10\n <span class=\"pf-v6-screen-reader\">items</span>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked\"\n type=\"button\"\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">\n 10\n <span class=\"pf-v6-screen-reader\">items</span>\n </span>\n</button>\n\n<br />\n<br />\n\n<strong>Unread</strong>\n<br />\n<button class=\"pf-v6-c-button pf-m-unread pf-m-stateful\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">\n 10\n <span class=\"pf-v6-screen-reader\">unread items</span>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked\"\n type=\"button\"\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">\n 10\n <span class=\"pf-v6-screen-reader\">unread items</span>\n </span>\n</button>\n\n<br />\n<br />\n\n<strong>Attention</strong>\n<br />\n<button class=\"pf-v6-c-button pf-m-attention pf-m-stateful\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">\n 10\n <span class=\"pf-v6-screen-reader\">unread items, needs attention</span>\n </span>\n</button>\n\n<button\n class=\"pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked\"\n type=\"button\"\n>\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">\n 10\n <span class=\"pf-v6-screen-reader\">unread items, needs attention</span>\n </span>\n</button>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
89
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
90
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
89
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2075" data-pf-content="true" class="pf-v6-c-content--h3">Favorite</h3>
|
|
90
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2082" data-pf-content="true" class="pf-v6-c-content--p">A favorite button should use a plain button with the star icon. Applying <code>.pf-m-favorited</code> to the button initiates a microanimation and indicates that the item is favorited.</p>
|
|
91
91
|
|
|
92
92
|
<astro-island uid="2uEvn6" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<button\n class=\"pf-v6-c-button pf-m-favorite pf-m-plain\"\n type=\"button\"\n aria-label=\"not starred\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n</button>\n<button\n class=\"pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain\"\n type=\"button\"\n aria-label=\"starred\"\n>\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-star\" aria-hidden=\"true\"></i>\n </span>\n</button>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
93
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
94
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
95
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
96
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
97
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
98
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
93
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2076" data-pf-content="true" class="pf-v6-c-content--h2">Documentation</h2>
|
|
94
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2077" data-pf-content="true" class="pf-v6-c-content--h3">Overview</h3>
|
|
95
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2078" data-pf-content="true" class="pf-v6-c-content--p">Always add a modifier class to add color to the button.</p>
|
|
96
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2079" data-pf-content="true" class="pf-v6-c-content--h3">Button vs link</h3>
|
|
97
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2083" data-pf-content="true" class="pf-v6-c-content--p">Semantic buttons and links are important for usability as well as accessibility. Using an <code>a</code> instead of a <code>button</code> element to perform user initiated actions should be avoided, unless absolutely necessary.</p>
|
|
98
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2080" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
|
|
99
99
|
|
|
100
100
|
|
|
101
101
|
|
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
|
|
153
153
|
|
|
154
154
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>aria-pressed="true or false"</code></td><td><code>.pf-v6-c-button</code></td><td>Indicates that the button is a toggle. When set to true, <code>pf-m-active</code> should also be set so that the button displays in an active state. <strong>Required when button is a toggle</strong></td></tr><tr><td><code>aria-label="[button label text]"</code></td><td><code>.pf-v6-c-button.pf-m-plain</code></td><td>Provides an accessible name for the button when an icon is used instead of text. <strong>Required when icon is used with no supporting text</strong></td></tr><tr><td><code>aria-label="[descriptive text]"</code></td><td><code>a.pf-v6-c-button</code>, <code>span.pf-v6-c-button.pf-m-link.pf-m-inline</code></td><td>The button component’s text should adequately describe its purpose. If it does not, <code>aria-label</code> can provide more detailed interaction information.</td></tr><tr><td><code>disabled</code></td><td><code>button.pf-v6-c-button</code></td><td>When a button element is used, indicates that it is unavailable and removes it from keyboard focus. <strong>Required when button is disabled</strong></td></tr><tr><td><code>aria-disabled=true</code></td><td><code>button.pf-v6-c-button</code></td><td>When a button element is used, indicates that it is unavailable but does not prevent keyboard or hover interactions. Used when a disabled button provides interactive elements like a tooltip.</td></tr><tr><td><code>aria-disabled=true</code></td><td><code>a.pf-v6-c-button.pf-m-disabled</code>, <code>span.pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-disabled</code></td><td>When a non-button element is used, indicates that it is unavailable. <strong>Required when element is disabled</strong></td></tr><tr><td><code>aria-expanded=true</code></td><td><code>.pf-v6-c-button.pf-m-expanded</code></td><td>Indicates that the expanded content element is visible. <strong>Required</strong></td></tr><tr><td><code>tabindex="-1"</code></td><td><code>a.pf-v6-c-button.pf-m-disabled</code>, <code>span.pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-disabled</code></td><td>When a non-button element is used, removes it from keyboard focus. <strong>Required when element is disabled</strong></td></tr><tr><td><code>tabindex="0"</code></td><td><code>span.pf-v6-c-button.pf-m-link.pf-m-inline</code></td><td>Inserts the span into the tab order of the page so that it is focusable. <strong>Required when the element is a span</strong></td></tr></tbody></table>
|
|
155
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
155
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2081" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
|
|
156
156
|
|
|
157
157
|
|
|
158
158
|
|
|
@@ -303,6 +303,6 @@
|
|
|
303
303
|
|
|
304
304
|
|
|
305
305
|
|
|
306
|
-
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-button</code></td><td><code><button>, <span></code></td><td>Initiates a button. Always use it with a modifier class. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-button__icon</code></td><td><code><span></code></td><td>Initiates a button icon.</td></tr><tr><td><code>.pf-v6-c-button__progress</code></td><td><code><span></code></td><td>Initiates a button progress container.</td></tr><tr><td><code>.pf-v6-c-button__count</code></td><td><code><span></code></td><td>Initiates a button count container. <strong>Note:</strong> Count should only be used on link buttons.</td></tr><tr><td><code>.pf-m-primary</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for primary styles.</td></tr><tr><td><code>.pf-m-secondary</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for secondary styles.</td></tr><tr><td><code>.pf-m-tertiary</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for tertiary styles.</td></tr><tr><td><code>.pf-m-danger</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for danger styles.</td></tr><tr><td><code>.pf-m-warning</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for warning styles.</td></tr><tr><td><code>.pf-m-link</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon.</td></tr><tr><td><code>.pf-m-plain</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for <code>.pf-m-plain</code> icon buttons such as close, expand, kebab, etc.</td></tr><tr><td><code>.pf-m-no-padding</code></td><td><code>.pf-v6-c-button.pf-m-plain</code></td><td>Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them.</td></tr><tr><td><code>.pf-m-inline</code></td><td><code>.pf-v6-c-button.pf-m-link</code></td><td>Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a <code><span></code>, the text will flow inline with text around it.</td></tr><tr><td><code>.pf-m-block</code></td><td><code>.pf-v6-c-button</code></td><td>Creates a block level button.</td></tr><tr><td><code>.pf-m-control</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for control styles. <strong>Note:</strong> This modifier should only be used when using buttons in the Input Group or Clipboard Copy components.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-button.pf-m-control</code></td><td>Modifies a control button for the expanded state.</td></tr><tr><td><code>.pf-m-start</code></td><td><code>.pf-v6-c-button__icon</code></td><td>Applies right spacing to an icon inside of a button when the icon comes before text.</td></tr><tr><td><code>.pf-m-end</code></td><td><code>.pf-v6-c-button__icon</code></td><td>Applies left spacing to an icon inside of a button when the icon comes after text.</td></tr><tr><td><code>.pf-m-active</code></td><td><code>.pf-v6-c-button</code></td><td>Forces display of the active state of the button. This modifier should be used when <code>aria-pressed</code> is set to true so that the button displays in an active state.</td></tr><tr><td><code>.pf-m-small</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies the button for small/compact styles.</td></tr><tr><td><code>.pf-m-aria-disabled</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies a button to be visually disabled, yet is still focusable.</td></tr><tr><td><code>.pf-m-display-lg</code></td><td><code>.pf-v6-c-button</code>, <code>pf-v6-c-button.pf-m-link</code></td><td>Modifies the button and link button for large display styling. For example, use this modifier to achieve “call to action” styles.</td></tr><tr><td><code>.pf-m-progress</code></td><td><code>.pf-v6-c-button</code></td><td>Indicates that the button supports the progress state. <strong>Note:</strong> Not used with the plain variation.</td></tr><tr><td><code>.pf-m-in-progress</code></td><td><code>.pf-v6-c-button</code></td><td>Indicates that the button is in the in progress state.</td></tr><tr><td><code>.pf-m-stateful</code></td><td><code>.pf-v6-c-button</code></td><td>Indicates that the button is used for one of read, unread, and attention states. <strong>Note:</strong> Always use with a modifier of <code>.pf-m-read</code>, <code>.pf-m-unread</code>, or <code>.pf-m-attention</code>.</td></tr><tr><td><code>.pf-m-notify</code></td><td><code>.pf-v6-c-button</code></td><td>Indicates that the button should show the user notification of an event. <strong>Note:</strong> This is intended for use with a bell icon in the notification badge.</td></tr><tr><td><code>.pf-m-favorite</code></td><td><code>.pf-v6-c-button .pf-m-plain</code></td><td>Modifies a plain button to be a favorite button. <strong>Note:</strong> This is intended for use with a star icon.</td></tr><tr><td><code>.pf-m-favorited</code></td><td><code>.pf-v6-c-button .pf-m-plain .pf-m-favorite</code></td><td>Modifies a favorite button to indicate that item is favorited.</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
306
|
+
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-button</code></td><td><code><button>, <span></code></td><td>Initiates a button. Always use it with a modifier class. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-button__icon</code></td><td><code><span></code></td><td>Initiates a button icon.</td></tr><tr><td><code>.pf-v6-c-button__progress</code></td><td><code><span></code></td><td>Initiates a button progress container.</td></tr><tr><td><code>.pf-v6-c-button__count</code></td><td><code><span></code></td><td>Initiates a button count container. <strong>Note:</strong> Count should only be used on link buttons.</td></tr><tr><td><code>.pf-m-primary</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for primary styles.</td></tr><tr><td><code>.pf-m-secondary</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for secondary styles.</td></tr><tr><td><code>.pf-m-tertiary</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for tertiary styles.</td></tr><tr><td><code>.pf-m-danger</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for danger styles.</td></tr><tr><td><code>.pf-m-warning</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for warning styles.</td></tr><tr><td><code>.pf-m-link</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon.</td></tr><tr><td><code>.pf-m-plain</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for <code>.pf-m-plain</code> icon buttons such as close, expand, kebab, etc.</td></tr><tr><td><code>.pf-m-no-padding</code></td><td><code>.pf-v6-c-button.pf-m-plain</code></td><td>Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them.</td></tr><tr><td><code>.pf-m-inline</code></td><td><code>.pf-v6-c-button.pf-m-link</code></td><td>Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a <code><span></code>, the text will flow inline with text around it.</td></tr><tr><td><code>.pf-m-block</code></td><td><code>.pf-v6-c-button</code></td><td>Creates a block level button.</td></tr><tr><td><code>.pf-m-control</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies for control styles. <strong>Note:</strong> This modifier should only be used when using buttons in the Input Group or Clipboard Copy components.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-button.pf-m-control</code></td><td>Modifies a control button for the expanded state.</td></tr><tr><td><code>.pf-m-start</code></td><td><code>.pf-v6-c-button__icon</code></td><td>Applies right spacing to an icon inside of a button when the icon comes before text.</td></tr><tr><td><code>.pf-m-end</code></td><td><code>.pf-v6-c-button__icon</code></td><td>Applies left spacing to an icon inside of a button when the icon comes after text.</td></tr><tr><td><code>.pf-m-active</code></td><td><code>.pf-v6-c-button</code></td><td>Forces display of the active state of the button. This modifier should be used when <code>aria-pressed</code> is set to true so that the button displays in an active state.</td></tr><tr><td><code>.pf-m-small</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies the button for small/compact styles.</td></tr><tr><td><code>.pf-m-aria-disabled</code></td><td><code>.pf-v6-c-button</code></td><td>Modifies a button to be visually disabled, yet is still focusable.</td></tr><tr><td><code>.pf-m-display-lg</code></td><td><code>.pf-v6-c-button</code>, <code>pf-v6-c-button.pf-m-link</code></td><td>Modifies the button and link button for large display styling. For example, use this modifier to achieve “call to action” styles.</td></tr><tr><td><code>.pf-m-progress</code></td><td><code>.pf-v6-c-button</code></td><td>Indicates that the button supports the progress state. <strong>Note:</strong> Not used with the plain variation.</td></tr><tr><td><code>.pf-m-in-progress</code></td><td><code>.pf-v6-c-button</code></td><td>Indicates that the button is in the in progress state.</td></tr><tr><td><code>.pf-m-stateful</code></td><td><code>.pf-v6-c-button</code></td><td>Indicates that the button is used for one of read, unread, and attention states. <strong>Note:</strong> Always use with a modifier of <code>.pf-m-read</code>, <code>.pf-m-unread</code>, or <code>.pf-m-attention</code>.</td></tr><tr><td><code>.pf-m-notify</code></td><td><code>.pf-v6-c-button</code></td><td>Indicates that the button should show the user notification of an event. <strong>Note:</strong> This is intended for use with a bell icon in the notification badge.</td></tr><tr><td><code>.pf-m-favorite</code></td><td><code>.pf-v6-c-button .pf-m-plain</code></td><td>Modifies a plain button to be a favorite button. <strong>Note:</strong> This is intended for use with a star icon.</td></tr><tr><td><code>.pf-m-favorited</code></td><td><code>.pf-v6-c-button .pf-m-plain .pf-m-favorite</code></td><td>Modifies a favorite button to indicate that item is favorited.</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2058" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
|
|
307
307
|
CSS variables
|
|
308
308
|
</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="2h0htY" component-url="/_astro/CSSTable.DRfZMeKo.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,false],"cssPrefix":[0,"pf-v6-c-button"]}" ssr client="only" opts="{"name":"CSSTableComponent","value":"react"}"></astro-island></div></div></div></div> </div></section> </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>
|