@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
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.15.9"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.QW52Ox2j.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
|
|
2
|
-
<link rel="stylesheet" href="/_astro/
|
|
3
|
-
<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
|
|
2
|
+
<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
|
|
4
3
|
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
|
|
5
|
-
<link rel="stylesheet" href="/_astro/
|
|
4
|
+
<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
|
|
5
|
+
<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
6
6
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
7
7
|
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
|
|
8
8
|
animation-duration: 180ms;
|
|
@@ -42,94 +42,94 @@
|
|
|
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="Z1vDdGA" 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-496"><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="sVR65" 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-166"><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-497"><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-498"><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-166"><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/label/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/label/html"> HTML </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-2802" data-pf-content="true" class="pf-v6-c-content--p">import ’./Label.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="1bt8Kg" 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-451"><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="5n5Vn" 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-151"><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-452"><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-453"><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-151"><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/label/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/label/html"> HTML </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-2509" data-pf-content="true" class="pf-v6-c-content--p">import ’./Label.css’</p>
|
|
46
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2510" 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-2511" data-pf-content="true" class="pf-v6-c-content--h3">Filled</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="1aeaKY" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<strong>Non-status:</strong>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-filled\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Grey</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Grey icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"grey-filled-removable-text\"\n >Grey removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"grey-filled-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"grey-filled-removable-button grey-filled-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"grey-filled-icon-removable-text\"\n >Grey icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"grey-filled-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"grey-filled-icon-removable-button grey-filled-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Grey link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Grey button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"grey-filled-link-removable-text\"\n >Grey link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"grey-filled-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"grey-filled-link-removable-button grey-filled-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"grey-filled-button-removable-text\"\n >Grey button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"grey-filled-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"grey-filled-button-removable-button grey-filled-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Grey label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"grey-filled-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Grey label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"grey-filled-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"grey-filled-truncated-with-icon-button grey-filled-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-clickable\">\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"grey-filled-link-removable-disabled-text\"\n >Grey link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"grey-filled-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"grey-filled-link-removable-disabled-button grey-filled-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"grey-filled-button-removable-disabled-text\"\n >Grey button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"grey-filled-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"grey-filled-button-removable-disabled-button grey-filled-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Blue</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Blue icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"blue-filled-removable-text\"\n >Blue removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"blue-filled-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"blue-filled-removable-button blue-filled-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"blue-filled-icon-removable-text\"\n >Blue icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"blue-filled-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"blue-filled-icon-removable-button blue-filled-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-blue pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Blue link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-blue pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Blue button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-blue pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"blue-filled-link-removable-text\"\n >Blue link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"blue-filled-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"blue-filled-link-removable-button blue-filled-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-blue pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"blue-filled-button-removable-text\"\n >Blue button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"blue-filled-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"blue-filled-button-removable-button blue-filled-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Blue label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"blue-filled-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Blue label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"blue-filled-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"blue-filled-truncated-with-icon-button blue-filled-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-blue pf-m-clickable\">\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"blue-filled-link-removable-disabled-text\"\n >Blue link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"blue-filled-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"blue-filled-link-removable-disabled-button blue-filled-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-blue pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"blue-filled-button-removable-disabled-text\"\n >Blue button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"blue-filled-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"blue-filled-button-removable-disabled-button blue-filled-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Green</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Green icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"green-filled-removable-text\"\n >Green removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"green-filled-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"green-filled-removable-button green-filled-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"green-filled-icon-removable-text\"\n >Green icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"green-filled-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"green-filled-icon-removable-button green-filled-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-green pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Green link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-green pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Green button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-green pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"green-filled-link-removable-text\"\n >Green link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"green-filled-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"green-filled-link-removable-button green-filled-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-green pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"green-filled-button-removable-text\"\n >Green button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"green-filled-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"green-filled-button-removable-button green-filled-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Green label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"green-filled-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Green label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"green-filled-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"green-filled-truncated-with-icon-button green-filled-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-green pf-m-clickable\">\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"green-filled-link-removable-disabled-text\"\n >Green link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"green-filled-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"green-filled-link-removable-disabled-button green-filled-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-green pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"green-filled-button-removable-disabled-text\"\n >Green button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"green-filled-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"green-filled-button-removable-disabled-button green-filled-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Orange</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Orange icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orange-filled-removable-text\"\n >Orange removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orange-filled-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orange-filled-removable-button orange-filled-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orange-filled-icon-removable-text\"\n >Orange icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orange-filled-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orange-filled-icon-removable-button orange-filled-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orange pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Orange link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orange pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Orange button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orange pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orange-filled-link-removable-text\"\n >Orange link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orange-filled-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orange-filled-link-removable-button orange-filled-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orange pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orange-filled-button-removable-text\"\n >Orange button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orange-filled-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orange-filled-button-removable-button orange-filled-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Orange label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orange-filled-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Orange label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orange-filled-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orange-filled-truncated-with-icon-button orange-filled-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-orange pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orange-filled-link-removable-disabled-text\"\n >Orange link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"orange-filled-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orange-filled-link-removable-disabled-button orange-filled-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-orange pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orange-filled-button-removable-disabled-text\"\n >Orange button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"orange-filled-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orange-filled-button-removable-disabled-button orange-filled-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Red</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Red icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"red-filled-removable-text\"\n >Red removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"red-filled-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"red-filled-removable-button red-filled-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"red-filled-icon-removable-text\"\n >Red icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"red-filled-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"red-filled-icon-removable-button red-filled-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-red pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Red link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-red pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Red button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-red pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"red-filled-link-removable-text\"\n >Red link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"red-filled-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"red-filled-link-removable-button red-filled-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-red pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"red-filled-button-removable-text\"\n >Red button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"red-filled-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"red-filled-button-removable-button red-filled-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Red label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"red-filled-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Red label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"red-filled-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"red-filled-truncated-with-icon-button red-filled-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-red pf-m-clickable\">\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"red-filled-link-removable-disabled-text\"\n >Red link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"red-filled-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"red-filled-link-removable-disabled-button red-filled-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-red pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"red-filled-button-removable-disabled-text\"\n >Red button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"red-filled-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"red-filled-button-removable-disabled-button red-filled-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orangered\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Orange red</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orangered\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Orange red icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orangered\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orangered-filled-removable-text\"\n >Orange red removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orangered-filled-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orangered-filled-removable-button orangered-filled-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orangered\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orangered-filled-icon-removable-text\"\n >Orange red icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orangered-filled-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orangered-filled-icon-removable-button orangered-filled-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orangered pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Orange red link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orangered pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Orange red button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orangered pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orangered-filled-link-removable-text\"\n >Orange red link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orangered-filled-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orangered-filled-link-removable-button orangered-filled-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orangered pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orangered-filled-button-removable-text\"\n >Orange red button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orangered-filled-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orangered-filled-button-removable-button orangered-filled-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orangered\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Orange red label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-orangered\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orangered-filled-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Orange red label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orangered-filled-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orangered-filled-truncated-with-icon-button orangered-filled-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-orangered pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orangered-filled-link-removable-disabled-text\"\n >Orange red link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"orangered-filled-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orangered-filled-link-removable-disabled-button orangered-filled-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-orangered pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orangered-filled-button-removable-disabled-text\"\n >Orange red button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"orangered-filled-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orangered-filled-button-removable-disabled-button orangered-filled-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Purple</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Purple icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"purple-filled-removable-text\"\n >Purple removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"purple-filled-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"purple-filled-removable-button purple-filled-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"purple-filled-icon-removable-text\"\n >Purple icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"purple-filled-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"purple-filled-icon-removable-button purple-filled-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-purple pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Purple link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-purple pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Purple button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-purple pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"purple-filled-link-removable-text\"\n >Purple link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"purple-filled-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"purple-filled-link-removable-button purple-filled-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-purple pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"purple-filled-button-removable-text\"\n >Purple button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"purple-filled-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"purple-filled-button-removable-button purple-filled-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Purple label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"purple-filled-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Purple label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"purple-filled-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"purple-filled-truncated-with-icon-button purple-filled-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-purple pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"purple-filled-link-removable-disabled-text\"\n >Purple link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"purple-filled-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"purple-filled-link-removable-disabled-button purple-filled-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-purple pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"purple-filled-button-removable-disabled-text\"\n >Purple button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"purple-filled-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"purple-filled-button-removable-disabled-button purple-filled-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Teal</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Teal icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"teal-filled-removable-text\"\n >Teal removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"teal-filled-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"teal-filled-removable-button teal-filled-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"teal-filled-icon-removable-text\"\n >Teal icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"teal-filled-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"teal-filled-icon-removable-button teal-filled-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-teal pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Teal link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-teal pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Teal button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-teal pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"teal-filled-link-removable-text\"\n >Teal link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"teal-filled-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"teal-filled-link-removable-button teal-filled-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-teal pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"teal-filled-button-removable-text\"\n >Teal button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"teal-filled-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"teal-filled-button-removable-button teal-filled-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Teal label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"teal-filled-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Teal label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"teal-filled-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"teal-filled-truncated-with-icon-button teal-filled-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-teal pf-m-clickable\">\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"teal-filled-link-removable-disabled-text\"\n >Teal link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"teal-filled-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"teal-filled-link-removable-disabled-button teal-filled-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-teal pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"teal-filled-button-removable-disabled-text\"\n >Teal button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"teal-filled-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"teal-filled-button-removable-disabled-button teal-filled-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-yellow\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Yellow</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-yellow\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Yellow icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-yellow\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"yellow-filled-removable-text\"\n >Yellow removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"yellow-filled-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"yellow-filled-removable-button yellow-filled-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-yellow\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"yellow-filled-icon-removable-text\"\n >Yellow icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"yellow-filled-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"yellow-filled-icon-removable-button yellow-filled-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-yellow pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Yellow link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-yellow pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Yellow button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-yellow pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"yellow-filled-link-removable-text\"\n >Yellow link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"yellow-filled-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"yellow-filled-link-removable-button yellow-filled-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-yellow pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"yellow-filled-button-removable-text\"\n >Yellow button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"yellow-filled-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"yellow-filled-button-removable-button yellow-filled-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-yellow\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Yellow label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-yellow\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"yellow-filled-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Yellow label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"yellow-filled-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"yellow-filled-truncated-with-icon-button yellow-filled-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-yellow pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"yellow-filled-link-removable-disabled-text\"\n >Yellow link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"yellow-filled-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"yellow-filled-link-removable-disabled-button yellow-filled-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-yellow pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"yellow-filled-button-removable-disabled-text\"\n >Yellow button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"yellow-filled-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"yellow-filled-button-removable-disabled-button yellow-filled-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<strong>Status:</strong>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-success\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Success</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-success\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"success-filled-status-removable-text\"\n >Success removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"success-filled-status-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"success-filled-status-removable-button success-filled-status-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-success pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Success link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-success pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Success button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-success pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"success-filled-status-link-removable-text\"\n >Success link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"success-filled-status-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"success-filled-status-link-removable-button success-filled-status-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-success pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"success-filled-status-button-removable-text\"\n >Success button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"success-filled-status-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"success-filled-status-button-removable-button success-filled-status-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-success\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Success, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-success\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"success-filled-status-truncated-removable-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Success removable, max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"success-filled-status-truncated-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"success-filled-status-truncated-removable-button success-filled-status-truncated-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-success pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"success-filled-status-link-removable-disabled-text\"\n >Success link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"success-filled-status-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"success-filled-status-link-removable-disabled-button success-filled-status-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-success pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"success-filled-status-button-removable-disabled-text\"\n >Success button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"success-filled-status-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"success-filled-status-button-removable-disabled-button success-filled-status-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-warning\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Warning</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-warning\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"warning-filled-status-removable-text\"\n >Warning removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"warning-filled-status-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"warning-filled-status-removable-button warning-filled-status-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-warning pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Warning link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-warning pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Warning button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-warning pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"warning-filled-status-link-removable-text\"\n >Warning link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"warning-filled-status-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"warning-filled-status-link-removable-button warning-filled-status-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-warning pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"warning-filled-status-button-removable-text\"\n >Warning button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"warning-filled-status-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"warning-filled-status-button-removable-button warning-filled-status-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-warning\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Warning, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-warning\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"warning-filled-status-truncated-removable-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Warning removable, max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"warning-filled-status-truncated-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"warning-filled-status-truncated-removable-button warning-filled-status-truncated-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-warning pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"warning-filled-status-link-removable-disabled-text\"\n >Warning link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"warning-filled-status-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"warning-filled-status-link-removable-disabled-button warning-filled-status-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-warning pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"warning-filled-status-button-removable-disabled-text\"\n >Warning button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"warning-filled-status-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"warning-filled-status-button-removable-disabled-button warning-filled-status-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-danger\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Danger</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-danger\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"danger-filled-status-removable-text\"\n >Danger removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"danger-filled-status-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"danger-filled-status-removable-button danger-filled-status-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-danger pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Danger link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-danger pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Danger button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-danger pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"danger-filled-status-link-removable-text\"\n >Danger link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"danger-filled-status-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"danger-filled-status-link-removable-button danger-filled-status-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-danger pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"danger-filled-status-button-removable-text\"\n >Danger button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"danger-filled-status-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"danger-filled-status-button-removable-button danger-filled-status-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-danger\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Danger, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-danger\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"danger-filled-status-truncated-removable-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Danger removable, max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"danger-filled-status-truncated-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"danger-filled-status-truncated-removable-button danger-filled-status-truncated-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-danger pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"danger-filled-status-link-removable-disabled-text\"\n >Danger link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"danger-filled-status-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"danger-filled-status-link-removable-disabled-button danger-filled-status-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-danger pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"danger-filled-status-button-removable-disabled-text\"\n >Danger button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"danger-filled-status-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"danger-filled-status-button-removable-disabled-button danger-filled-status-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-info\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Info</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-info\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"info-filled-status-removable-text\"\n >Info removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"info-filled-status-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"info-filled-status-removable-button info-filled-status-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-info pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Info link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-info pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Info button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-info pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"info-filled-status-link-removable-text\"\n >Info link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"info-filled-status-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"info-filled-status-link-removable-button info-filled-status-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-info pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"info-filled-status-button-removable-text\"\n >Info button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"info-filled-status-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"info-filled-status-button-removable-button info-filled-status-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-info\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Info, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-info\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"info-filled-status-truncated-removable-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Info removable, max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"info-filled-status-truncated-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"info-filled-status-truncated-removable-button info-filled-status-truncated-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-info pf-m-clickable\">\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"info-filled-status-link-removable-disabled-text\"\n >Info link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"info-filled-status-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"info-filled-status-link-removable-disabled-button info-filled-status-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-info pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"info-filled-status-button-removable-disabled-text\"\n >Info button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"info-filled-status-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"info-filled-status-button-removable-disabled-button info-filled-status-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-custom\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Custom</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-custom\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"custom-filled-status-removable-text\"\n >Custom removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"custom-filled-status-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"custom-filled-status-removable-button custom-filled-status-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-custom pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Custom link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-custom pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Custom button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-custom pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"custom-filled-status-link-removable-text\"\n >Custom link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"custom-filled-status-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"custom-filled-status-link-removable-button custom-filled-status-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-custom pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"custom-filled-status-button-removable-text\"\n >Custom button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"custom-filled-status-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"custom-filled-status-button-removable-button custom-filled-status-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-custom\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Custom, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-custom\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"custom-filled-status-truncated-removable-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Custom removable, max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"custom-filled-status-truncated-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"custom-filled-status-truncated-removable-button custom-filled-status-truncated-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-custom pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"custom-filled-status-link-removable-disabled-text\"\n >Custom link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"custom-filled-status-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"custom-filled-status-link-removable-disabled-button custom-filled-status-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-disabled pf-m-custom pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"custom-filled-status-button-removable-disabled-text\"\n >Custom button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"custom-filled-status-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"custom-filled-status-button-removable-disabled-button custom-filled-status-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\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-2512" data-pf-content="true" class="pf-v6-c-content--h3">Outline</h3>
|
|
51
51
|
|
|
52
52
|
<astro-island uid="1JDnTi" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<strong>Non-status:</strong>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Grey</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Grey icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"grey-outline-removable-text\"\n >Grey removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"grey-outline-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"grey-outline-removable-button grey-outline-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"grey-outline-icon-removable-text\"\n >Grey icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"grey-outline-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"grey-outline-icon-removable-button grey-outline-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Grey link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Grey button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"grey-outline-link-removable-text\"\n >Grey link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"grey-outline-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"grey-outline-link-removable-button grey-outline-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"grey-outline-button-removable-text\"\n >Grey button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"grey-outline-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"grey-outline-button-removable-button grey-outline-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Grey label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"grey-outline-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Grey label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"grey-outline-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"grey-outline-truncated-with-icon-button grey-outline-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-clickable\">\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"grey-outline-link-removable-disabled-text\"\n >Grey link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"grey-outline-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"grey-outline-link-removable-disabled-button grey-outline-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"grey-outline-button-removable-disabled-text\"\n >Grey button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"grey-outline-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"grey-outline-button-removable-disabled-button grey-outline-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Blue</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Blue icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"blue-outline-removable-text\"\n >Blue removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"blue-outline-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"blue-outline-removable-button blue-outline-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"blue-outline-icon-removable-text\"\n >Blue icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"blue-outline-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"blue-outline-icon-removable-button blue-outline-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-blue pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Blue link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-blue pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Blue button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-blue pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"blue-outline-link-removable-text\"\n >Blue link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"blue-outline-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"blue-outline-link-removable-button blue-outline-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-blue pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"blue-outline-button-removable-text\"\n >Blue button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"blue-outline-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"blue-outline-button-removable-button blue-outline-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Blue label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"blue-outline-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Blue label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"blue-outline-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"blue-outline-truncated-with-icon-button blue-outline-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-blue pf-m-clickable\">\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"blue-outline-link-removable-disabled-text\"\n >Blue link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"blue-outline-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"blue-outline-link-removable-disabled-button blue-outline-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-blue pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"blue-outline-button-removable-disabled-text\"\n >Blue button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"blue-outline-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"blue-outline-button-removable-disabled-button blue-outline-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Green</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Green icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"green-outline-removable-text\"\n >Green removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"green-outline-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"green-outline-removable-button green-outline-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"green-outline-icon-removable-text\"\n >Green icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"green-outline-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"green-outline-icon-removable-button green-outline-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-green pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Green link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-green pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Green button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-green pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"green-outline-link-removable-text\"\n >Green link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"green-outline-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"green-outline-link-removable-button green-outline-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-green pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"green-outline-button-removable-text\"\n >Green button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"green-outline-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"green-outline-button-removable-button green-outline-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Green label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"green-outline-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Green label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"green-outline-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"green-outline-truncated-with-icon-button green-outline-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-green pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"green-outline-link-removable-disabled-text\"\n >Green link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"green-outline-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"green-outline-link-removable-disabled-button green-outline-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-green pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"green-outline-button-removable-disabled-text\"\n >Green button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"green-outline-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"green-outline-button-removable-disabled-button green-outline-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Orange</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Orange icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orange-outline-removable-text\"\n >Orange removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orange-outline-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orange-outline-removable-button orange-outline-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orange-outline-icon-removable-text\"\n >Orange icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orange-outline-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orange-outline-icon-removable-button orange-outline-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orange pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Orange link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orange pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Orange button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orange pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orange-outline-link-removable-text\"\n >Orange link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orange-outline-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orange-outline-link-removable-button orange-outline-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orange pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orange-outline-button-removable-text\"\n >Orange button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orange-outline-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orange-outline-button-removable-button orange-outline-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Orange label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orange-outline-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Orange label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orange-outline-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orange-outline-truncated-with-icon-button orange-outline-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-orange pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orange-outline-link-removable-disabled-text\"\n >Orange link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"orange-outline-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orange-outline-link-removable-disabled-button orange-outline-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-orange pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orange-outline-button-removable-disabled-text\"\n >Orange button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"orange-outline-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orange-outline-button-removable-disabled-button orange-outline-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Red</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Red icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"red-outline-removable-text\"\n >Red removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"red-outline-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"red-outline-removable-button red-outline-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"red-outline-icon-removable-text\"\n >Red icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"red-outline-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"red-outline-icon-removable-button red-outline-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-red pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Red link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-red pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Red button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-red pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"red-outline-link-removable-text\"\n >Red link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"red-outline-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"red-outline-link-removable-button red-outline-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-red pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"red-outline-button-removable-text\"\n >Red button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"red-outline-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"red-outline-button-removable-button red-outline-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Red label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"red-outline-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Red label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"red-outline-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"red-outline-truncated-with-icon-button red-outline-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-red pf-m-clickable\">\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"red-outline-link-removable-disabled-text\"\n >Red link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"red-outline-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"red-outline-link-removable-disabled-button red-outline-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-red pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"red-outline-button-removable-disabled-text\"\n >Red button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"red-outline-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"red-outline-button-removable-disabled-button red-outline-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orangered\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Orange red</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orangered\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Orange red icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orangered\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orangered-outline-removable-text\"\n >Orange red removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orangered-outline-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orangered-outline-removable-button orangered-outline-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orangered\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orangered-outline-icon-removable-text\"\n >Orange red icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orangered-outline-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orangered-outline-icon-removable-button orangered-outline-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orangered pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Orange red link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orangered pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Orange red button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orangered pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orangered-outline-link-removable-text\"\n >Orange red link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orangered-outline-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orangered-outline-link-removable-button orangered-outline-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orangered pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orangered-outline-button-removable-text\"\n >Orange red button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orangered-outline-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orangered-outline-button-removable-button orangered-outline-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orangered\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Orange red label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-orangered\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orangered-outline-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Orange red label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"orangered-outline-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orangered-outline-truncated-with-icon-button orangered-outline-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-orangered pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orangered-outline-link-removable-disabled-text\"\n >Orange red link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"orangered-outline-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orangered-outline-link-removable-disabled-button orangered-outline-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-orangered pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"orangered-outline-button-removable-disabled-text\"\n >Orange red button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"orangered-outline-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"orangered-outline-button-removable-disabled-button orangered-outline-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Purple</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Purple icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"purple-outline-removable-text\"\n >Purple removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"purple-outline-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"purple-outline-removable-button purple-outline-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"purple-outline-icon-removable-text\"\n >Purple icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"purple-outline-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"purple-outline-icon-removable-button purple-outline-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-purple pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Purple link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-purple pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Purple button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-purple pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"purple-outline-link-removable-text\"\n >Purple link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"purple-outline-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"purple-outline-link-removable-button purple-outline-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-purple pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"purple-outline-button-removable-text\"\n >Purple button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"purple-outline-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"purple-outline-button-removable-button purple-outline-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Purple label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"purple-outline-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Purple label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"purple-outline-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"purple-outline-truncated-with-icon-button purple-outline-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-purple pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"purple-outline-link-removable-disabled-text\"\n >Purple link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"purple-outline-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"purple-outline-link-removable-disabled-button purple-outline-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-purple pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"purple-outline-button-removable-disabled-text\"\n >Purple button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"purple-outline-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"purple-outline-button-removable-disabled-button purple-outline-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Teal</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Teal icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"teal-outline-removable-text\"\n >Teal removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"teal-outline-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"teal-outline-removable-button teal-outline-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"teal-outline-icon-removable-text\"\n >Teal icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"teal-outline-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"teal-outline-icon-removable-button teal-outline-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-teal pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Teal link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-teal pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Teal button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-teal pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"teal-outline-link-removable-text\"\n >Teal link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"teal-outline-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"teal-outline-link-removable-button teal-outline-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-teal pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"teal-outline-button-removable-text\"\n >Teal button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"teal-outline-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"teal-outline-button-removable-button teal-outline-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Teal label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"teal-outline-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Teal label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"teal-outline-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"teal-outline-truncated-with-icon-button teal-outline-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-teal pf-m-clickable\">\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"teal-outline-link-removable-disabled-text\"\n >Teal link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"teal-outline-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"teal-outline-link-removable-disabled-button teal-outline-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-teal pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"teal-outline-button-removable-disabled-text\"\n >Teal button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"teal-outline-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"teal-outline-button-removable-disabled-button teal-outline-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-yellow\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Yellow</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-yellow\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Yellow icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-yellow\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"yellow-outline-removable-text\"\n >Yellow removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"yellow-outline-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"yellow-outline-removable-button yellow-outline-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-yellow\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"yellow-outline-icon-removable-text\"\n >Yellow icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"yellow-outline-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"yellow-outline-icon-removable-button yellow-outline-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-yellow pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Yellow link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-yellow pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Yellow button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-yellow pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"yellow-outline-link-removable-text\"\n >Yellow link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"yellow-outline-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"yellow-outline-link-removable-button yellow-outline-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-yellow pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"yellow-outline-button-removable-text\"\n >Yellow button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"yellow-outline-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"yellow-outline-button-removable-button yellow-outline-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-yellow\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Yellow label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-yellow\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"yellow-outline-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Yellow label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"yellow-outline-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"yellow-outline-truncated-with-icon-button yellow-outline-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-yellow pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"yellow-outline-link-removable-disabled-text\"\n >Yellow link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"yellow-outline-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"yellow-outline-link-removable-disabled-button yellow-outline-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-yellow pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"yellow-outline-button-removable-disabled-text\"\n >Yellow button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"yellow-outline-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"yellow-outline-button-removable-disabled-button yellow-outline-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<strong>Status:</strong>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-success\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Success</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-success\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"success-outline-status-removable-text\"\n >Success removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"success-outline-status-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"success-outline-status-removable-button success-outline-status-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-success pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Success link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-success pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Success button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-success pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"success-outline-status-link-removable-text\"\n >Success link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"success-outline-status-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"success-outline-status-link-removable-button success-outline-status-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-success pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"success-outline-status-button-removable-text\"\n >Success button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"success-outline-status-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"success-outline-status-button-removable-button success-outline-status-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-success\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Success, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-success\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"success-outline-status-truncated-removable-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Success removable, max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"success-outline-status-truncated-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"success-outline-status-truncated-removable-button success-outline-status-truncated-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-success pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"success-outline-status-link-removable-disabled-text\"\n >Success link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"success-outline-status-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"success-outline-status-link-removable-disabled-button success-outline-status-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-success pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"success-outline-status-button-removable-disabled-text\"\n >Success button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"success-outline-status-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"success-outline-status-button-removable-disabled-button success-outline-status-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-warning\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Warning</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-warning\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"warning-outline-status-removable-text\"\n >Warning removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"warning-outline-status-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"warning-outline-status-removable-button warning-outline-status-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-warning pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Warning link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-warning pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Warning button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-warning pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"warning-outline-status-link-removable-text\"\n >Warning link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"warning-outline-status-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"warning-outline-status-link-removable-button warning-outline-status-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-warning pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"warning-outline-status-button-removable-text\"\n >Warning button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"warning-outline-status-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"warning-outline-status-button-removable-button warning-outline-status-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-warning\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Warning, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-warning\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"warning-outline-status-truncated-removable-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Warning removable, max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"warning-outline-status-truncated-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"warning-outline-status-truncated-removable-button warning-outline-status-truncated-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-warning pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"warning-outline-status-link-removable-disabled-text\"\n >Warning link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"warning-outline-status-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"warning-outline-status-link-removable-disabled-button warning-outline-status-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-warning pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"warning-outline-status-button-removable-disabled-text\"\n >Warning button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"warning-outline-status-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"warning-outline-status-button-removable-disabled-button warning-outline-status-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-danger\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Danger</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-danger\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"danger-outline-status-removable-text\"\n >Danger removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"danger-outline-status-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"danger-outline-status-removable-button danger-outline-status-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-danger pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Danger link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-danger pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Danger button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-danger pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"danger-outline-status-link-removable-text\"\n >Danger link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"danger-outline-status-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"danger-outline-status-link-removable-button danger-outline-status-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-danger pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"danger-outline-status-button-removable-text\"\n >Danger button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"danger-outline-status-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"danger-outline-status-button-removable-button danger-outline-status-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-danger\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Danger, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-danger\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"danger-outline-status-truncated-removable-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Danger removable, max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"danger-outline-status-truncated-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"danger-outline-status-truncated-removable-button danger-outline-status-truncated-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-danger pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"danger-outline-status-link-removable-disabled-text\"\n >Danger link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"danger-outline-status-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"danger-outline-status-link-removable-disabled-button danger-outline-status-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-danger pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"danger-outline-status-button-removable-disabled-text\"\n >Danger button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"danger-outline-status-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"danger-outline-status-button-removable-disabled-button danger-outline-status-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-info\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Info</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-info\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"info-outline-status-removable-text\"\n >Info removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"info-outline-status-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"info-outline-status-removable-button info-outline-status-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-info pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Info link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-info pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Info button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-info pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"info-outline-status-link-removable-text\"\n >Info link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"info-outline-status-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"info-outline-status-link-removable-button info-outline-status-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-info pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"info-outline-status-button-removable-text\"\n >Info button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"info-outline-status-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"info-outline-status-button-removable-button info-outline-status-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-info\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Info, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-info\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"info-outline-status-truncated-removable-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Info removable, max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"info-outline-status-truncated-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"info-outline-status-truncated-removable-button info-outline-status-truncated-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-info pf-m-clickable\">\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"info-outline-status-link-removable-disabled-text\"\n >Info link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"info-outline-status-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"info-outline-status-link-removable-disabled-button info-outline-status-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-info pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"info-outline-status-button-removable-disabled-text\"\n >Info button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"info-outline-status-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"info-outline-status-button-removable-disabled-button info-outline-status-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-custom\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Custom</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-custom\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"custom-outline-status-removable-text\"\n >Custom removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"custom-outline-status-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"custom-outline-status-removable-button custom-outline-status-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-custom pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Custom link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-custom pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Custom button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-custom pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"custom-outline-status-link-removable-text\"\n >Custom link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"custom-outline-status-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"custom-outline-status-link-removable-button custom-outline-status-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-custom pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"custom-outline-status-button-removable-text\"\n >Custom button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"custom-outline-status-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"custom-outline-status-button-removable-button custom-outline-status-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-custom\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Custom, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-custom\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"custom-outline-status-truncated-removable-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Custom removable, max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"custom-outline-status-truncated-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"custom-outline-status-truncated-removable-button custom-outline-status-truncated-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-custom pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"custom-outline-status-link-removable-disabled-text\"\n >Custom link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"custom-outline-status-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"custom-outline-status-link-removable-disabled-button custom-outline-status-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-disabled pf-m-custom pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"custom-outline-status-button-removable-disabled-text\"\n >Custom button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"custom-outline-status-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"custom-outline-status-button-removable-disabled-button custom-outline-status-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\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-2513" data-pf-content="true" class="pf-v6-c-content--h3">Compact</h3>
|
|
54
54
|
|
|
55
55
|
<astro-island uid="1mHNpg" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<span class=\"pf-v6-c-label pf-m-filled pf-m-compact\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Compact</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-compact\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Compact icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-compact\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"compact-removable-text\"\n >Compact removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"compact-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"compact-removable-button compact-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-compact\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"compact-icon-removable-text\"\n >Compact icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"compact-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"compact-icon-removable-button compact-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-compact pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Compact link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-compact pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Compact button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-compact pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"compact-link-removable-text\"\n >Compact link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"compact-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"compact-link-removable-button compact-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-compact pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"compact-button-removable-text\"\n >Compact button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"compact-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"compact-button-removable-button compact-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-compact\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Compact label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-filled pf-m-compact\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"compact-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Compact label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"compact-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"compact-truncated-with-icon-button compact-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-compact pf-m-disabled pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"compact-link-removable-disabled-text\"\n >Compact link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"compact-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"compact-link-removable-disabled-button compact-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-compact pf-m-disabled pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"compact-button-removable-disabled-text\"\n >Compact button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"compact-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"compact-button-removable-disabled-button compact-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<br />\n<br />\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-compact pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Compact</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-compact pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Compact icon</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-compact pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"compact-outline-removable-text\"\n >Compact removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"compact-outline-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"compact-outline-removable-button compact-outline-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-compact pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"compact-outline-icon-removable-text\"\n >Compact icon removable</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"compact-outline-icon-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"compact-outline-icon-removable-button compact-outline-icon-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-compact pf-m-blue pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span class=\"pf-v6-c-label__text\">Compact link</span>\n </a>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-compact pf-m-blue pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span class=\"pf-v6-c-label__text\">Compact button</span>\n </button>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-compact pf-m-blue pf-m-clickable\">\n <a class=\"pf-v6-c-label__content pf-m-clickable\" href=\"#\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"compact-outline-link-removable-text\"\n >Compact link removable</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"compact-outline-link-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"compact-outline-link-removable-button compact-outline-link-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-compact pf-m-blue pf-m-clickable\">\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"compact-outline-button-removable-text\"\n >Compact button removable</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"compact-outline-button-removable-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"compact-outline-button-removable-button compact-outline-button-removable-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-compact pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 28ch\"\n >Compact label, max-width truncation customization</span>\n </span>\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-compact pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"compact-outline-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Compact label with icon and set max-width truncation customization</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"compact-outline-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"compact-outline-truncated-with-icon-button compact-outline-truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-compact pf-m-disabled pf-m-blue pf-m-clickable\"\n>\n <a\n class=\"pf-v6-c-label__content pf-m-clickable\"\n href=\"#\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"compact-outline-link-removable-disabled-text\"\n >Compact link removable (disabled)</span>\n </a>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"compact-outline-link-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"compact-outline-link-removable-disabled-button compact-outline-link-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-compact pf-m-disabled pf-m-blue pf-m-clickable\"\n>\n <button class=\"pf-v6-c-label__content pf-m-clickable\" type=\"button\" disabled>\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n id=\"compact-outline-button-removable-disabled-text\"\n >Compact button removable (disabled)</span>\n </button>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n disabled\n id=\"compact-outline-button-removable-disabled-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"compact-outline-button-removable-disabled-button compact-outline-button-removable-disabled-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\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-
|
|
57
|
-
<p 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-2514" data-pf-content="true" class="pf-v6-c-content--h3">Overflow</h3>
|
|
57
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2515" data-pf-content="true" class="pf-v6-c-content--p">This style of label is used to indicate overflow within a label group.</p>
|
|
58
58
|
|
|
59
59
|
<astro-island uid="1uSXVp" 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-label pf-m-overflow\" type=\"button\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Overflow</span>\n </span>\n</button>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
60
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
61
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
60
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2516" data-pf-content="true" class="pf-v6-c-content--h3">Editable</h3>
|
|
61
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2546" data-pf-content="true" class="pf-v6-c-content--p"><strong>Note: Editable label behavior must be handled with JavaScript.</strong></p>
|
|
62
62
|
|
|
63
63
|
<astro-island uid="Z1WvYd9" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<span class=\"pf-v6-c-label pf-m-filled pf-m-editable pf-m-blue\">\n <button\n class=\"pf-v6-c-label__content\"\n id=\"editable-label-editable-content\"\n aria-label=\"Editable text\"\n >\n <span class=\"pf-v6-c-label__text\" id=\"editable-label-text\">Editable label</span>\n </button>\n\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"editable-label-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"editable-label-button editable-label-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-filled pf-m-editable pf-m-editable-active pf-m-blue\"\n>\n <input\n class=\"pf-v6-c-label__content\"\n id=\"editable-label-active-editable-content\"\n type=\"text\"\n value=\"Editable active\"\n aria-label=\"Editable text\"\n />\n</span>\n\n<span class=\"pf-v6-c-label pf-m-outline pf-m-compact pf-m-editable pf-m-blue\">\n <button\n class=\"pf-v6-c-label__content\"\n id=\"compact-editable-label-editable-content\"\n aria-label=\"Editable text\"\n >\n <span\n class=\"pf-v6-c-label__text\"\n id=\"compact-editable-label-text\"\n >Compact editable label</span>\n </button>\n\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"compact-editable-label-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"compact-editable-label-button compact-editable-label-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</span>\n\n<span\n class=\"pf-v6-c-label pf-m-outline pf-m-compact pf-m-editable pf-m-editable-active pf-m-blue\"\n>\n <input\n class=\"pf-v6-c-label__content\"\n id=\"compact-editable-label-active-editable-content\"\n type=\"text\"\n value=\"Compact editable active\"\n aria-label=\"Editable text\"\n />\n</span>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
64
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
65
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
64
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2517" data-pf-content="true" class="pf-v6-c-content--h3">Add label</h3>
|
|
65
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2518" data-pf-content="true" class="pf-v6-c-content--p">This style of label is used to add new labels to a label group.</p>
|
|
66
66
|
|
|
67
67
|
<astro-island uid="2cC8jN" 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-label pf-m-add\" type=\"button\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Add Label</span>\n </span>\n</button>\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-
|
|
69
|
-
<p 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-2519" data-pf-content="true" class="pf-v6-c-content--h3">Basic label group</h3>
|
|
69
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2520" data-pf-content="true" class="pf-v6-c-content--p">Use a label group to display multiple labels at once.</p>
|
|
70
70
|
|
|
71
71
|
<astro-island uid="1IQrvL" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 3</span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n</div>\n\n<br />\n<br />\n\n<div class=\"pf-v6-c-label-group\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">A</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">T</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">I</span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
72
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
72
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2521" data-pf-content="true" class="pf-v6-c-content--h3">Label group with overflow</h3>
|
|
73
73
|
|
|
74
74
|
<astro-island uid="Z18vDNK" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 3</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <button class=\"pf-v6-c-label pf-m-overflow pf-m-blue\" type=\"button\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">3 more</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
75
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
75
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2522" data-pf-content="true" class="pf-v6-c-content--h3">Label group with overflow expanded</h3>
|
|
76
76
|
|
|
77
77
|
<astro-island uid="28Jeoh" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 3</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 4</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 5</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <button class=\"pf-v6-c-label pf-m-overflow\" type=\"button\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">3 less</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
78
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
79
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
78
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2523" data-pf-content="true" class="pf-v6-c-content--h3">Editable label group with add button</h3>
|
|
79
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2524" data-pf-content="true" class="pf-v6-c-content--p">The contents of a label group can be modified by removing labels or adding new ones using the Add button.</p>
|
|
80
80
|
|
|
81
81
|
<astro-island uid="1fez02" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 3</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <button class=\"pf-v6-c-label pf-m-add\" type=\"button\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Add label</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
82
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
82
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2525" data-pf-content="true" class="pf-v6-c-content--h3">Label group with category label</h3>
|
|
83
83
|
|
|
84
84
|
<astro-island uid="ZrVFRV" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group pf-m-category\">\n <div class=\"pf-v6-c-label-group__main\">\n <span\n class=\"pf-v6-c-label-group__label\"\n aria-hidden=\"true\"\n id=\"label-group-category-label\"\n >Group label</span>\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-labelledby=\"label-group-category-label\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 3</span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
85
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
85
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2526" data-pf-content="true" class="pf-v6-c-content--h3">Label group with removable categories</h3>
|
|
86
86
|
|
|
87
87
|
<astro-island uid="18grFQ" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group pf-m-category\">\n <div class=\"pf-v6-c-label-group__main\">\n <span\n class=\"pf-v6-c-label-group__label\"\n aria-hidden=\"true\"\n id=\"label-group-category-removable-label\"\n >Group label</span>\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-labelledby=\"label-group-category-removable-label\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 3</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 4</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 5</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 6</span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n <div class=\"pf-v6-c-label-group__close\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"label-group-category-removable-button label-group-category-removable-label\"\n aria-label=\"Close label group\"\n id=\"label-group-category-removable-button\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
88
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
88
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2527" data-pf-content="true" class="pf-v6-c-content--h3">Vertical label group</h3>
|
|
89
89
|
|
|
90
90
|
<astro-island uid="1kjkVH" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group pf-m-vertical\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 3</span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
91
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
91
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2528" data-pf-content="true" class="pf-v6-c-content--h3">Vertical label group with overflow</h3>
|
|
92
92
|
|
|
93
93
|
<astro-island uid="12uhN7" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group pf-m-vertical\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 3</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <button class=\"pf-v6-c-label pf-m-overflow\" type=\"button\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">3 more</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
94
|
-
<h3 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-2529" data-pf-content="true" class="pf-v6-c-content--h3">Vertical label group with overflow expanded</h3>
|
|
95
95
|
|
|
96
96
|
<astro-island uid="10h6uV" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group pf-m-vertical\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 3</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 4</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 5</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <button class=\"pf-v6-c-label pf-m-overflow\" type=\"button\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">3 less</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
97
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
97
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2530" data-pf-content="true" class="pf-v6-c-content--h3">Vertical label group with category</h3>
|
|
98
98
|
|
|
99
99
|
<astro-island uid="TrCXF" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group pf-m-vertical pf-m-category\">\n <div class=\"pf-v6-c-label-group__main\">\n <span\n class=\"pf-v6-c-label-group__label\"\n aria-hidden=\"true\"\n id=\"label-group-vertical-category-label\"\n >Group label</span>\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-labelledby=\"label-group-vertical-category-label\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 3</span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
100
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
100
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2531" data-pf-content="true" class="pf-v6-c-content--h3">Vertical label group with removable category</h3>
|
|
101
101
|
|
|
102
102
|
<astro-island uid="Z2ehbzL" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group pf-m-vertical pf-m-category\">\n <div class=\"pf-v6-c-label-group__main\">\n <span\n class=\"pf-v6-c-label-group__label\"\n aria-hidden=\"true\"\n id=\"label-group-vertical-category-removable-label\"\n >Group label</span>\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-labelledby=\"label-group-vertical-category-removable-label\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">Label 3</span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n <div class=\"pf-v6-c-label-group__close\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"label-group-vertical-category-removable-button label-group-vertical-category-removable-label\"\n aria-label=\"Close label group\"\n id=\"label-group-vertical-category-removable-button\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
103
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
104
|
-
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
105
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
103
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2548" data-pf-content="true" class="pf-v6-c-content--p">In addition to the JavaScript management of <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2532" data-pf-content="true" class="pf-v6-c-content--a">editable labels</a>, dynamic label groups also need:</p>
|
|
104
|
+
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2549" data-pf-content="true" class="pf-v6-c-content--ul">
|
|
105
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2547" data-pf-content="true" class="pf-v6-c-content--li"><code>.pf-v6-c-label-group.pf-m-editable</code> onClick event should (excluding labels within) set focus on <code>.pf-v6-c-label-group__textarea</code></li>
|
|
106
106
|
</ul>
|
|
107
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
107
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2533" data-pf-content="true" class="pf-v6-c-content--h3">Editable labels, dynamic label group</h3>
|
|
108
108
|
|
|
109
109
|
<astro-island uid="tepLG" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group pf-m-editable\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-editable pf-m-blue\">\n <button\n class=\"pf-v6-c-label__content\"\n id=\"editable-labels-editable-group-example-editable-label-editable-1-editable-content\"\n aria-label=\"Editable text\"\n >\n <span\n class=\"pf-v6-c-label__text\"\n id=\"editable-labels-editable-group-example-editable-label-editable-1-text\"\n >Editable label 1</span>\n </button>\n\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"editable-labels-editable-group-example-editable-label-editable-1-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"editable-labels-editable-group-example-editable-label-editable-1-button editable-labels-editable-group-example-editable-label-editable-1-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-editable pf-m-blue\">\n <button\n class=\"pf-v6-c-label__content\"\n id=\"editable-labels-editable-group-example-editable-label-editable-2-editable-content\"\n aria-label=\"Editable text\"\n >\n <span\n class=\"pf-v6-c-label__text\"\n id=\"editable-labels-editable-group-example-editable-label-editable-2-text\"\n >Editable label 2</span>\n </button>\n\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"editable-labels-editable-group-example-editable-label-editable-2-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"editable-labels-editable-group-example-editable-label-editable-2-button editable-labels-editable-group-example-editable-label-editable-2-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-editable pf-m-blue\">\n <button\n class=\"pf-v6-c-label__content\"\n id=\"editable-labels-editable-group-example-editable-label-editable-3-editable-content\"\n aria-label=\"Editable text\"\n >\n <span\n class=\"pf-v6-c-label__text\"\n id=\"editable-labels-editable-group-example-editable-label-editable-3-text\"\n >Editable label 3</span>\n </button>\n\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"editable-labels-editable-group-example-editable-label-editable-3-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"editable-labels-editable-group-example-editable-label-editable-3-button editable-labels-editable-group-example-editable-label-editable-3-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item pf-m-textarea\">\n <textarea\n class=\"pf-v6-c-label-group__textarea\"\n rows=\"1\"\n tabindex=\"0\"\n aria-label=\"New label\"\n ></textarea>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
110
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
110
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2534" data-pf-content="true" class="pf-v6-c-content--h3">Editable labels, label active, dynamic label group</h3>
|
|
111
111
|
|
|
112
112
|
<astro-island uid="nCk58" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group pf-m-editable\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-editable pf-m-blue\">\n <button\n class=\"pf-v6-c-label__content\"\n id=\"editable-labels-label-active-editable-group-example-editable-label-editable-1-editable-content\"\n aria-label=\"Editable text\"\n >\n <span\n class=\"pf-v6-c-label__text\"\n id=\"editable-labels-label-active-editable-group-example-editable-label-editable-1-text\"\n >Editable label 1</span>\n </button>\n\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"editable-labels-label-active-editable-group-example-editable-label-editable-1-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"editable-labels-label-active-editable-group-example-editable-label-editable-1-button editable-labels-label-active-editable-group-example-editable-label-editable-1-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-editable pf-m-blue\">\n <button\n class=\"pf-v6-c-label__content\"\n id=\"editable-labels-label-active-editable-group-example-editable-label-editable-2-editable-content\"\n aria-label=\"Editable text\"\n >\n <span\n class=\"pf-v6-c-label__text\"\n id=\"editable-labels-label-active-editable-group-example-editable-label-editable-2-text\"\n >Editable label 2</span>\n </button>\n\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"editable-labels-label-active-editable-group-example-editable-label-editable-2-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"editable-labels-label-active-editable-group-example-editable-label-editable-2-button editable-labels-label-active-editable-group-example-editable-label-editable-2-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span\n class=\"pf-v6-c-label pf-m-editable pf-m-editable-active pf-m-blue\"\n >\n <input\n class=\"pf-v6-c-label__content\"\n id=\"editable-labels-label-active-editable-group-example-editable-label-editable-3-editable-content\"\n type=\"text\"\n value=\"Editable label 3, active\"\n aria-label=\"Editable text\"\n />\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item pf-m-textarea\">\n <textarea\n class=\"pf-v6-c-label-group__textarea\"\n rows=\"1\"\n tabindex=\"0\"\n aria-label=\"New label\"\n ></textarea>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
113
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
113
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2535" data-pf-content="true" class="pf-v6-c-content--h3">Static labels, dynamic label group</h3>
|
|
114
114
|
|
|
115
115
|
<astro-island uid="Z1xnWVq" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group pf-m-editable\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"static-labels-dynamic-label-group-example-editable-label-static-1-text\"\n >Static label 1</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"static-labels-dynamic-label-group-example-editable-label-static-1-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"static-labels-dynamic-label-group-example-editable-label-static-1-button static-labels-dynamic-label-group-example-editable-label-static-1-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"static-labels-dynamic-label-group-example-editable-label-static-2-text\"\n >Static label 2</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"static-labels-dynamic-label-group-example-editable-label-static-2-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"static-labels-dynamic-label-group-example-editable-label-static-2-button static-labels-dynamic-label-group-example-editable-label-static-2-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"static-labels-dynamic-label-group-example-editable-label-static-3-text\"\n >Static label 3</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"static-labels-dynamic-label-group-example-editable-label-static-3-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"static-labels-dynamic-label-group-example-editable-label-static-3-button static-labels-dynamic-label-group-example-editable-label-static-3-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item pf-m-textarea\">\n <textarea\n class=\"pf-v6-c-label-group__textarea\"\n rows=\"1\"\n tabindex=\"0\"\n aria-label=\"New label\"\n ></textarea>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
116
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
116
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2536" data-pf-content="true" class="pf-v6-c-content--h3">Mixed labels (static / editable), dynamic label group</h3>
|
|
117
117
|
|
|
118
118
|
<astro-island uid="2dIW5x" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group pf-m-editable\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"mixed-labels-dynamic-label-group-example-editable-label-static-1-text\"\n >Static label 1</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"mixed-labels-dynamic-label-group-example-editable-label-static-1-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"mixed-labels-dynamic-label-group-example-editable-label-static-1-button mixed-labels-dynamic-label-group-example-editable-label-static-1-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"mixed-labels-dynamic-label-group-example-editable-label-static-2-text\"\n >Static label 2</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"mixed-labels-dynamic-label-group-example-editable-label-static-2-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"mixed-labels-dynamic-label-group-example-editable-label-static-2-button mixed-labels-dynamic-label-group-example-editable-label-static-2-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-editable pf-m-blue\">\n <button\n class=\"pf-v6-c-label__content\"\n id=\"mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-editable-content\"\n aria-label=\"Editable text\"\n >\n <span\n class=\"pf-v6-c-label__text\"\n id=\"mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-text\"\n >Dynamic, editable label 1</span>\n </button>\n\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-1-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-editable pf-m-blue\">\n <button\n class=\"pf-v6-c-label__content\"\n id=\"mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-editable-content\"\n aria-label=\"Editable text\"\n >\n <span\n class=\"pf-v6-c-label__text\"\n id=\"mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-text\"\n >Dynamic, editable label 2</span>\n </button>\n\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-2-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-editable pf-m-blue\">\n <button\n class=\"pf-v6-c-label__content\"\n id=\"mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-editable-content\"\n aria-label=\"Editable text\"\n >\n <span\n class=\"pf-v6-c-label__text\"\n id=\"mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-text\"\n >Dynamic, editable label 3</span>\n </button>\n\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-button mixed-labels-dynamic-label-group-example-editable-label-dynamic-3-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item pf-m-textarea\">\n <textarea\n class=\"pf-v6-c-label-group__textarea\"\n rows=\"1\"\n tabindex=\"0\"\n aria-label=\"New label\"\n ></textarea>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
119
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
119
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2537" data-pf-content="true" class="pf-v6-c-content--h3">Label group with compact labels</h3>
|
|
120
120
|
|
|
121
121
|
<astro-island uid="Z10twn" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-compact\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-compact pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-compact pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 3</span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
122
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
122
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2538" data-pf-content="true" class="pf-v6-c-content--h3">Label group with compact labels and overflow</h3>
|
|
123
123
|
|
|
124
124
|
<astro-island uid="1AgYtb" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-compact\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-compact pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-compact pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 3</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <button class=\"pf-v6-c-label pf-m-compact pf-m-overflow\" type=\"button\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">3 more</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
125
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
125
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2539" data-pf-content="true" class="pf-v6-c-content--h3">Vertical label group with compact labels</h3>
|
|
126
126
|
|
|
127
127
|
<astro-island uid="ZyiTnk" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-group pf-m-vertical\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-compact\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-compact pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-compact pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 3</span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
128
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
128
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2540" data-pf-content="true" class="pf-v6-c-content--h3">Labels with truncation</h3>
|
|
129
129
|
|
|
130
130
|
<astro-island uid="Z1md7fw" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-label-truncate--example\">\n <strong>Label</strong>\n <br />\n <br />\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"-truncated-with-icon-text\"\n style=\"--pf-v6-c-label__text--MaxWidth: 38ch\"\n >Label with set max-width truncation</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n id=\"-truncated-with-icon-button\"\n aria-label=\"Remove\"\n aria-labelledby=\"-truncated-with-icon-button -truncated-with-icon-text\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n <br />\n <br />\n <strong>Label group</strong>\n <br />\n <br />\n <div class=\"pf-v6-c-label-group\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n >Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula</span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n </div>\n <br />\n <br />\n <strong>Label group vertical</strong>\n <br />\n <br />\n <div class=\"pf-v6-c-label-group pf-m-vertical\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 1</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Label 2</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-label__text\"\n >Label 3 has a lot of text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula</span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
131
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
132
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
131
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2541" data-pf-content="true" class="pf-v6-c-content--h2">Documentation</h2>
|
|
132
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2542" data-pf-content="true" class="pf-v6-c-content--h3">Label usage</h3>
|
|
133
133
|
|
|
134
134
|
|
|
135
135
|
|
|
@@ -275,8 +275,8 @@
|
|
|
275
275
|
|
|
276
276
|
|
|
277
277
|
|
|
278
|
-
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-label</code></td><td><code><span></code>, <code><button></code></td><td>Initiates a label. Without a color modifier, the label’s default style is grey. Use a color modifier to change the label color. Use a <code><button></code> if the label is an overflow label used in the label group. <strong>Required. Note: always use with either <code>.pf-m-filled</code> or <code>.pf-m-outline</code>.</strong></td></tr><tr><td><code>.pf-v6-c-label__content</code></td><td><code><span></code>, <code><a></code>, <code><button></code></td><td>Creates a content wrapper. Use as an <code><a></code> element if the label serves as a link. Use a <code><button></code> if the label serves as an action. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-label__icon</code></td><td><code><span></code></td><td>Initiates a label icon.</td></tr><tr><td><code>.pf-v6-c-label__text</code></td><td><code><span></code></td><td>Initiates label text. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-label__editable-text</code></td><td><code><button></code>, <code><input></code></td><td>Initiates editable label text. See the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
279
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
278
|
+
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-label</code></td><td><code><span></code>, <code><button></code></td><td>Initiates a label. Without a color modifier, the label’s default style is grey. Use a color modifier to change the label color. Use a <code><button></code> if the label is an overflow label used in the label group. <strong>Required. Note: always use with either <code>.pf-m-filled</code> or <code>.pf-m-outline</code>.</strong></td></tr><tr><td><code>.pf-v6-c-label__content</code></td><td><code><span></code>, <code><a></code>, <code><button></code></td><td>Creates a content wrapper. Use as an <code><a></code> element if the label serves as a link. Use a <code><button></code> if the label serves as an action. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-label__icon</code></td><td><code><span></code></td><td>Initiates a label icon.</td></tr><tr><td><code>.pf-v6-c-label__text</code></td><td><code><span></code></td><td>Initiates label text. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-label__editable-text</code></td><td><code><button></code>, <code><input></code></td><td>Initiates editable label text. See the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2543" data-pf-content="true" class="pf-v6-c-content--a">editable</a> example for details about handling behavior in Javascript.</td></tr><tr><td><code>.pf-v6-c-label__actions</code></td><td><code><span></code></td><td>Creates a wrapper for label actions. <strong>Required for removable labels</strong></td></tr><tr><td><code>.pf-m-filled</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies label for filled styles.</td></tr><tr><td><code>.pf-m-outline</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies label for outline styles.</td></tr><tr><td><code>.pf-m-compact</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies label for compact styles.</td></tr><tr><td><code>.pf-m-overflow</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies label for overflow styles for use in a label group.</td></tr><tr><td><code>.pf-m-add</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies label for add styles for use in a label group.</td></tr><tr><td><code>.pf-m-blue</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies the label to have blue colored styling.</td></tr><tr><td><code>.pf-m-green</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies the label to have green colored styling.</td></tr><tr><td><code>.pf-m-orange</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies the label to have orange colored styling.</td></tr><tr><td><code>.pf-m-red</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies the label to have red colored styling.</td></tr><tr><td><code>.pf-m-purple</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies the label to have purple colored styling.</td></tr><tr><td><code>.pf-m-teal</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies the label to have teal colored styling.</td></tr><tr><td><code>.pf-m-yellow</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies the label to have yellow colored styling.</td></tr><tr><td><code>.pf-m-success</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies the label to have success colored styling.</td></tr><tr><td><code>.pf-m-warning</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies the label to have warning colored styling.</td></tr><tr><td><code>.pf-m-danger</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies the label to have danger colored styling.</td></tr><tr><td><code>.pf-m-info</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies the label to have info colored styling.</td></tr><tr><td><code>.pf-m-custom</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies the label to have custom colored styling.</td></tr><tr><td><code>.pf-m-disabled</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies label for disabled styles.</td></tr><tr><td><code>.pf-m-editable</code></td><td><code>.pf-v6-c-label</code></td><td>Modifies label for editable styles.</td></tr><tr><td><code>.pf-m-editable-active</code></td><td><code>.pf-v6-c-label.pf-m-editable</code></td><td>Modifies editable label for active styles.</td></tr><tr><td><code>--pf-v6-c-label__text--MaxWidth</code></td><td><code>.pf-v6-c-label</code></td><td>Modifiex the max width of the text before text will truncate.</td></tr></tbody></table>
|
|
279
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2544" data-pf-content="true" class="pf-v6-c-content--h3">Label group accessibility</h3>
|
|
280
280
|
|
|
281
281
|
|
|
282
282
|
|
|
@@ -318,7 +318,7 @@
|
|
|
318
318
|
|
|
319
319
|
|
|
320
320
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>role="list"</code></td><td><code>.pf-v6-c-label-group__list</code></td><td>Indicates that the label group list is a list element. This role is redundant since <code>.pf-v6-c-label-group__list</code> is a <code><ul></code> but is required for screen readers to announce the list properly. <strong>Required</strong></td></tr><tr><td><code>aria-label="[button label text]"</code></td><td><code>.pf-v6-c-label-group__close > button</code></td><td>Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. <strong>Required</strong></td></tr><tr><td><code>aria-labelledby="[id value of .pf-v6-c-label-group__close > button] [id value of .pf-v6-c-label-group__label]"</code></td><td><code>.pf-v6-c-label-group__close > button</code></td><td>Provides an accessible name for the button. <strong>Required</strong></td></tr><tr><td><code>aria-label="[label text]"</code></td><td><code>.pf-v6-c-label-group__textarea</code></td><td>Provides an accessible name for the textarea. <strong>Required</strong></td></tr><tr><td><code>row="1"</code></td><td><code>.pf-v6-c-label-group__textarea</code></td><td>Indicates that the label group textarea is one row. <strong>Required</strong></td></tr><tr><td><code>tabindex="0"</code></td><td><code>.pf-v6-c-label-group__textarea</code></td><td>Inserts the label group textarea into the tab order of the page so that it is focusable. <strong>Required</strong></td></tr></tbody></table>
|
|
321
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
321
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2545" data-pf-content="true" class="pf-v6-c-content--h3">Label group usage</h3>
|
|
322
322
|
|
|
323
323
|
|
|
324
324
|
|
|
@@ -384,6 +384,6 @@
|
|
|
384
384
|
|
|
385
385
|
|
|
386
386
|
|
|
387
|
-
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-label-group</code></td><td><code><div></code></td><td>Initiates the label group component. <strong>Required.</strong></td></tr><tr><td><code>.pf-v6-c-label-group__list</code></td><td><code><ul></code></td><td>Initiates the container for a list of labels. <strong>Required.</strong></td></tr><tr><td><code>.pf-v6-c-label-group__list-item</code></td><td><code><li></code></td><td>Initiates the list item inside of the label group. <strong>Required.</strong></td></tr><tr><td><code>.pf-v6-c-label-group__main</code></td><td><code><div></code></td><td>Initiates the main element in the label group. <strong>Required when label and list are present</strong></td></tr><tr><td><code>.pf-v6-c-label-group__textarea</code></td><td><code><textarea></code></td><td>Initiates the textarea element in the label group. <strong>Required when label group is editable</strong></td></tr><tr><td><code>.pf-v6-c-label-group__label</code></td><td><code><span></code></td><td>Initiates the label to be used in the label group.</td></tr><tr><td><code>.pf-v6-c-label-group__close</code></td><td><code><div></code></td><td>Initiates the container used for the button to remove the label group.</td></tr><tr><td><code>.pf-v6-c-button</code></td><td><code>.pf-v6-c-label-group__close <button></code></td><td>Initiates the button used to remove the label group.</td></tr><tr><td><code>.pf-m-editable</code></td><td><code>.pf-v6-c-label-group</code></td><td>Modifies the label group to support editable styling.</td></tr><tr><td><code>.pf-m-category</code></td><td><code>.pf-v6-c-label-group</code></td><td>Modifies the label group to support category styling.</td></tr><tr><td><code>.pf-m-textarea</code></td><td><code>.pf-v6-c-label-group__list-item</code></td><td>Modifies the label group list item to support textarea.</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-
|
|
387
|
+
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-label-group</code></td><td><code><div></code></td><td>Initiates the label group component. <strong>Required.</strong></td></tr><tr><td><code>.pf-v6-c-label-group__list</code></td><td><code><ul></code></td><td>Initiates the container for a list of labels. <strong>Required.</strong></td></tr><tr><td><code>.pf-v6-c-label-group__list-item</code></td><td><code><li></code></td><td>Initiates the list item inside of the label group. <strong>Required.</strong></td></tr><tr><td><code>.pf-v6-c-label-group__main</code></td><td><code><div></code></td><td>Initiates the main element in the label group. <strong>Required when label and list are present</strong></td></tr><tr><td><code>.pf-v6-c-label-group__textarea</code></td><td><code><textarea></code></td><td>Initiates the textarea element in the label group. <strong>Required when label group is editable</strong></td></tr><tr><td><code>.pf-v6-c-label-group__label</code></td><td><code><span></code></td><td>Initiates the label to be used in the label group.</td></tr><tr><td><code>.pf-v6-c-label-group__close</code></td><td><code><div></code></td><td>Initiates the container used for the button to remove the label group.</td></tr><tr><td><code>.pf-v6-c-button</code></td><td><code>.pf-v6-c-label-group__close <button></code></td><td>Initiates the button used to remove the label group.</td></tr><tr><td><code>.pf-m-editable</code></td><td><code>.pf-v6-c-label-group</code></td><td>Modifies the label group to support editable styling.</td></tr><tr><td><code>.pf-m-category</code></td><td><code>.pf-v6-c-label-group</code></td><td>Modifies the label group to support category styling.</td></tr><tr><td><code>.pf-m-textarea</code></td><td><code>.pf-v6-c-label-group__list-item</code></td><td>Modifies the label group list item to support textarea.</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-2508" 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>
|
|
388
388
|
CSS variables
|
|
389
389
|
</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="ZqP9lz" component-url="/_astro/CSSTable.DRfZMeKo.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,true],"cssPrefix":[0,"pf-v6-c-label"]}" ssr client="only" opts="{"name":"CSSTableComponent","value":"react"}"></astro-island></div><div class="pf-v6-l-stack__item"><astro-island uid="Z5zzBg" component-url="/_astro/CSSTable.DRfZMeKo.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,true],"cssPrefix":[0,"pf-v6-c-label-group"]}" 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>
|