diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md
new file mode 100644
index 00000000..8110e6f0
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCount.md
@@ -0,0 +1,35 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Component groups
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Tag count
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['TagCount']
+---
+import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount';
+
+The **tag count** component generates a tag icon that displays a number, which represents a count value.
+
+## Examples
+
+### Basic tag count
+
+A basic tag count uses the `count` property to display the number of tagged items.
+
+```js file="./TagCountExample.tsx"
+
+```
+
+### Disabled tag count
+
+When no value is provided to a tag count component, it will be styled as disabled.
+
+```js file="./TagCountDisabledExample.tsx"
+
+```
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountDisabledExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountDisabledExample.tsx
new file mode 100644
index 00000000..3ee38dcc
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountDisabledExample.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount';
+
+export const TagCountDisabledExample: React.FunctionComponent = () =>
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountExample.tsx
new file mode 100644
index 00000000..92507e4e
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/TagCount/TagCountExample.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import TagCount from '@patternfly/react-component-groups/dist/dynamic/TagCount';
+
+export const TagCountDisabledExample: React.FunctionComponent = () =>
diff --git a/packages/module/src/TagCount/TagCount.test.tsx b/packages/module/src/TagCount/TagCount.test.tsx
new file mode 100644
index 00000000..055c39c0
--- /dev/null
+++ b/packages/module/src/TagCount/TagCount.test.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import TagCount from './TagCount';
+
+describe('TagCount component', () => {
+ it('should render a disabled tag count with no value', () => {
+ expect(render()).toMatchSnapshot();
+ });
+
+
+ it('should render a tag count of 11', () => {
+ expect(render()).toMatchSnapshot();
+ });
+});
diff --git a/packages/module/src/TagCount/TagCount.tsx b/packages/module/src/TagCount/TagCount.tsx
new file mode 100644
index 00000000..c0f09757
--- /dev/null
+++ b/packages/module/src/TagCount/TagCount.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import clsx from 'clsx';
+import { Button, ButtonProps, Icon } from '@patternfly/react-core';
+import { TagIcon } from '@patternfly/react-icons';
+import { createUseStyles } from 'react-jss'
+
+const useStyles = createUseStyles({
+ buttonTagCount: {
+ color: 'var(--pf-v5-global--icon--Color--light)',
+ display: 'flex',
+ alignItems: 'center'
+ },
+
+ tagText: {
+ marginLeft: 10
+ }
+});
+
+export interface TagCountProps extends ButtonProps {
+ /** Count to display in tag count component */
+ count?: number;
+ /** Additional classes added to the tag count component */
+ className?: string;
+}
+
+const TagCount: React.FunctionComponent = (
+ { count,
+ className,
+ ...props }: TagCountProps) => {
+ const classes = useStyles();
+ const tagClasses = clsx(classes.buttonTagCount, className);
+ return (
+
+ );
+};
+
+export default TagCount;
diff --git a/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap b/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap
new file mode 100644
index 00000000..481232f9
--- /dev/null
+++ b/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap
@@ -0,0 +1,269 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TagCount component should render a disabled tag count with no value 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+ ,
+ "container": ,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
+
+exports[`TagCount component should render a tag count of 11 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+
+
+
+