@patternfly/react-core 6.2.0-prerelease.14 → 6.2.0-prerelease.16

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.13","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.15","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.13","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.15","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.13","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.15","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.14",
+  "version": "6.2.0-prerelease.16",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "d885c9f1b4b33197d643c3332593d11e717c09ef"
+  "gitHead": "fe3fa3883554e1e1ceb0618e9c4e0b6072d29d75"
 }

package/src/components/Toolbar/examples/Toolbar.md

@@ -24,16 +24,6 @@ Note: This example does not demonstrate responsive toolbar behavior. Responsive
 
 ```
 
-### Toolbar item spacers
-
-You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
-
-Items are spaced “16px” apart by default via their parents' `gap` or `columnGap` property. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
-
-```ts file="./ToolbarSpacers.tsx"
-
-```
-
 ### With adjusted inset
 
 To adjust a toolbar’s inset, use the `inset` property. You can set the inset value at multiple breakpoints, including "default", "md", "lg, "xl", and "2xl". Inset values include “insetNone”, “insetSm”, “insetMd”, “insetLg”, “insetXl”, and “inset2xl”.
@@ -120,3 +110,20 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
 ```ts file="./ToolbarStacked.tsx"
 
 ```
+
+## Examples with toolbar spacers
+You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
+
+Items are spaced “16px” apart by default and can be modified by changing their or their parents' `gap`, `columnGap`, and `rowGap` properties. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
+
+### Toolbar group spacers
+
+```ts file="./ToolbarGroupSpacers.tsx"
+
+```
+
+### Toolbar item spacers
+
+```ts file="./ToolbarItemSpacers.tsx"
+
+```

package/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx

@@ -0,0 +1,185 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+
+export const ToolbarGroupSpacers: React.FunctionComponent = () => {
+  const groupGapItems = (
+    <React.Fragment>
+      <ToolbarGroup>
+        <ToolbarItem>
+          <Button variant="secondary">Default Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Default Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup gap={{ default: 'gapNone' }}>
+        <ToolbarItem>
+          <Button variant="secondary">No Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup gap={{ default: 'gapSm' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Small Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup gap={{ default: 'gapXl' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const groupColumnGapItems = (
+    <React.Fragment>
+      <ToolbarGroup columnGap={{ default: 'columnGapNone' }}>
+        <ToolbarItem>
+          <Button variant="secondary">No Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup columnGap={{ default: 'columnGapSm' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Small Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarItem variant="separator"></ToolbarItem>
+      <ToolbarGroup columnGap={{ default: 'columnGapXl' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const groupRowGapItems = (
+    <React.Fragment>
+      <ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarGroup className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  return (
+    <>
+      Using gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{groupGapItems}</ToolbarContent>
+      </Toolbar>
+      Using column gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{groupColumnGapItems}</ToolbarContent>
+      </Toolbar>
+      Using row gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{groupRowGapItems}</ToolbarContent>
+      </Toolbar>
+      <br />
+    </>
+  );
+};

package/src/components/Toolbar/examples/ToolbarItemSpacers.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+
+export const ToolbarItemSpacers: React.FunctionComponent = () => {
+  const itemGapItems = (
+    <React.Fragment>
+      <ToolbarGroup className="pf-m-wrap">
+        <ToolbarItem gap={{ default: 'gapNone' }}>
+          <Button variant="secondary">No Gap</Button>
+          <Button variant="secondary">No Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem gap={{ default: 'gapSm' }}>
+          <Button variant="secondary">Small Gap</Button>
+          <Button variant="secondary">Small Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem gap={{ default: 'gapXl' }}>
+          <Button variant="secondary">Extra Large Gap</Button>
+          <Button variant="secondary">Extra Large Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const itemColumnGapItems = (
+    <React.Fragment>
+      <ToolbarGroup className="pf-m-wrap">
+        <ToolbarItem columnGap={{ default: 'columnGapNone' }}>
+          <Button variant="secondary">No Column Gap</Button>
+          <Button variant="secondary">No Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem columnGap={{ default: 'columnGapSm' }}>
+          <Button variant="secondary">Small Column Gap</Button>
+          <Button variant="secondary">Small Column Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem columnGap={{ default: 'columnGapXl' }}>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+          <Button variant="secondary">Extra Large Column Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  const itemRowGapItems = (
+    <React.Fragment>
+      <ToolbarGroup>
+        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapNone' }}>
+          <Button variant="secondary">No Row Gap</Button>
+          <Button variant="secondary">No Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapSm' }}>
+          <Button variant="secondary">Small Row Gap</Button>
+          <Button variant="secondary">Small Row Gap</Button>
+        </ToolbarItem>
+        <ToolbarItem variant="separator"></ToolbarItem>
+        <ToolbarItem className="pf-m-wrap" rowGap={{ default: 'rowGapXl' }}>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+          <Button variant="secondary">Extra Large Row Gap</Button>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </React.Fragment>
+  );
+
+  return (
+    <>
+      Using gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{itemGapItems}</ToolbarContent>
+      </Toolbar>
+      Using column gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{itemColumnGapItems}</ToolbarContent>
+      </Toolbar>
+      Using row gap
+      <br />
+      <br />
+      <Toolbar id="toolbar-spacers">
+        <ToolbarContent>{itemRowGapItems}</ToolbarContent>
+      </Toolbar>
+    </>
+  );
+};

package/src/demos/DashboardHeader.tsx

@@ -16,6 +16,8 @@ import {
   MastheadLogo,
   MastheadContent,
   MenuToggle,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -26,7 +28,6 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
@@ -108,10 +109,9 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
             >
               {notificationBadge ?? (
                 <ToolbarItem>
-                  <Button
+                  <NotificationBadge
                     aria-label="Notifications"
-                    variant={ButtonVariant.plain}
-                    icon={<BellIcon />}
+                    variant={NotificationBadgeVariant.read}
                     onClick={() => {}}
                   />
                 </ToolbarItem>

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

@@ -25,6 +25,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   SkipToContent,
@@ -35,7 +37,6 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -188,7 +189,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -31,6 +31,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   PageSidebar,
@@ -50,7 +52,6 @@ import {
 import { Link } from '@reach/router';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
@@ -385,7 +386,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>

package/src/demos/examples/Nav/NavFlyout.tsx

@@ -23,6 +23,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   PageSidebar,
@@ -35,7 +37,6 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -134,7 +135,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Nav/NavHorizontal.tsx

@@ -23,6 +23,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   SkipToContent,
@@ -35,7 +37,6 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
@@ -112,7 +113,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx

@@ -24,6 +24,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   PageSectionTypes,
@@ -37,7 +39,6 @@ import {
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
@@ -161,7 +162,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Nav/NavManual.tsx

@@ -24,6 +24,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   PageSidebar,
@@ -39,7 +41,6 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
@@ -128,7 +129,7 @@ export const NavManual: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Page/PageContextSelector.tsx

@@ -26,6 +26,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   PageSidebar,
@@ -39,7 +41,6 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -141,7 +142,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -27,6 +27,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   PageSidebar,
@@ -39,7 +41,6 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -124,7 +125,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -27,6 +27,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   PageSidebar,
@@ -39,7 +41,6 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -124,7 +125,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx

@@ -27,6 +27,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageBreadcrumb,
   PageGroup,
@@ -41,7 +43,6 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -116,7 +117,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>