diff --git a/packages/code-connect/components/Button/BlockButton.figma.tsx b/packages/code-connect/components/Button/BlockButton.figma.tsx
new file mode 100644
index 00000000000..065c8fef389
--- /dev/null
+++ b/packages/code-connect/components/Button/BlockButton.figma.tsx
@@ -0,0 +1,17 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+
+// Block Button
+figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-800', {
+ props: {
+ buttonText: figma.string('Text'),
+ isClicked: figma.enum('State', { Clicked: true }),
+ isDisabled: figma.enum('State', { Disabled: true }),
+ iconPosition: figma.boolean('Icon at end', { true: 'end', false: undefined })
+ },
+ example: (props) => (
+
+ )
+});
diff --git a/packages/code-connect/components/Button/Button.figma.tsx b/packages/code-connect/components/Button/Button.figma.tsx
new file mode 100644
index 00000000000..65c025fd173
--- /dev/null
+++ b/packages/code-connect/components/Button/Button.figma.tsx
@@ -0,0 +1,87 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
+
+// Documentation for Button can be found at https://www.patternfly.org/components/button
+
+figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-678', {
+ props: {
+ // string
+ buttonText: figma.string('Text'),
+
+ // boolean
+ icon: figma.boolean('Icon at start', {
+ true: ,
+ false: undefined
+ }),
+ iconPosition: figma.boolean('Icon at end', {
+ true: 'end',
+ false: undefined
+ }),
+ countOptions: figma.boolean('Count', {
+ true: {
+ count: '00',
+ isRead: false,
+ className: 'custom-badge-unread'
+ }
+ }),
+
+ // enum
+ isClicked: figma.enum('State', { Clicked: true }),
+ id: figma.enum('Type', {
+ Progress: 'loading-button',
+ 'Secondary progress': 'loading-button'
+ }),
+ isDanger: figma.enum('Type', {
+ Danger: true,
+ 'Secondary danger': true
+ }),
+ isDisabled: figma.enum('State', { Disabled: true }),
+ isExpanded: figma.enum('State', { Expanded: true }),
+ isLoading: figma.enum('State', {
+ Progress: {
+ loadingProps: {
+ spinnerAriaValueText: 'Spinner aria value text',
+ spinnerAriaLabelledBy: 'Spinner aria labelled by',
+ spinnerAriaLabel: 'Spinner aria label',
+ isLoading: true
+ },
+ onClick: () => {}
+ },
+ 'Secondary progress': {
+ loadingProps: {
+ spinnerAriaValueText: 'Spinner aria value text',
+ spinnerAriaLabelledBy: 'Spinner aria labelled by',
+ spinnerAriaLabel: 'Spinner aria label',
+ isLoading: true
+ },
+ onClick: () => {}
+ }
+ }),
+ size: figma.enum('Size', { Small: 'sm' }),
+ variant: figma.enum('Type', {
+ Primary: 'primary',
+ Secondary: 'secondary',
+ Tertiary: 'tertiary',
+ Warning: 'warning',
+ 'Secondary danger': 'secondary',
+ 'Secondary progress': 'secondary'
+ })
+ },
+ example: (props) => (
+
+ )
+});
diff --git a/packages/code-connect/components/Button/CTAButton.figma.tsx b/packages/code-connect/components/Button/CTAButton.figma.tsx
new file mode 100644
index 00000000000..ec94d6ee664
--- /dev/null
+++ b/packages/code-connect/components/Button/CTAButton.figma.tsx
@@ -0,0 +1,23 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
+
+// CTA Button
+figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-778', {
+ props: {
+ buttonText: figma.string('Text'),
+ icon: figma.enum('Type', { Inline: }),
+ iconPosition: figma.enum('Type', { Inline: 'end' }),
+ variant: figma.enum('Type', {
+ Primary: 'primary',
+ Secondary: 'secondary',
+ Tertiary: 'tertiary',
+ Link: 'link'
+ })
+ },
+ example: (props) => (
+
+ )
+});
diff --git a/packages/code-connect/components/Button/IconButtonPlainButton.figma.tsx b/packages/code-connect/components/Button/IconButtonPlainButton.figma.tsx
new file mode 100644
index 00000000000..3b5914164d9
--- /dev/null
+++ b/packages/code-connect/components/Button/IconButtonPlainButton.figma.tsx
@@ -0,0 +1,20 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+// Icon Button
+figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-736', {
+ props: {
+ isClicked: figma.enum('State', { Clicked: true }),
+ isDisabled: figma.enum('State', { Disabled: true }),
+ noPadding: figma.enum('Type', { 'No padding': true })
+ },
+ example: (props) => (
+ }
+ isClicked={props.isClicked}
+ isDisabled={props.isDisabled}
+ hasNoPadding={props.noPadding}
+ />
+ )
+});
diff --git a/packages/code-connect/components/Button/InlineLink.figma.tsx b/packages/code-connect/components/Button/InlineLink.figma.tsx
new file mode 100644
index 00000000000..d9934fb6fd0
--- /dev/null
+++ b/packages/code-connect/components/Button/InlineLink.figma.tsx
@@ -0,0 +1,27 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+
+// Inline Link
+figma.connect(
+ Button,
+ 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1291-2153',
+ {
+ props: {
+ buttonText: figma.string('Text'),
+ isClicked: figma.enum('State', { Visited: 'clicked' }),
+ isDisabled: figma.enum('State', { Disabled: true })
+ },
+ example: (props) => (
+
+ )
+ }
+);
diff --git a/packages/code-connect/components/Button/LinkButton.figma.tsx b/packages/code-connect/components/Button/LinkButton.figma.tsx
new file mode 100644
index 00000000000..99f59e472b1
--- /dev/null
+++ b/packages/code-connect/components/Button/LinkButton.figma.tsx
@@ -0,0 +1,50 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+
+// Link Button
+figma.connect(Button, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1259-745', {
+ props: {
+ countOptions: figma.enum('Type', {
+ 'Button with count': {
+ count: '00',
+ isRead: false
+ }
+ }),
+ isClicked: figma.enum('State', { Clicked: true }),
+ isDisabled: figma.enum('State', { Disabled: true }),
+ isDanger: figma.enum('Type', { Danger: true }),
+ icon: figma.boolean('Icon at start', {
+ true: figma.children('IconWrapper'),
+ false: undefined
+ }),
+ iconPosition: figma.boolean('Icon at end', {
+ true: 'end',
+ false: undefined
+ }),
+ isLoading: figma.enum('Type', { Progress: true }),
+ size: figma.enum('Size', { Small: 'sm' }),
+ variant: figma.enum('Type', {
+ Primary: 'primary',
+ Secondary: 'secondary',
+ Tertiary: 'tertiary',
+ Warning: 'warning',
+ 'Secondary danger': 'secondary',
+ 'Secondary progress': 'secondary'
+ })
+ },
+ example: (props) => (
+
+ )
+});
diff --git a/packages/code-connect/components/Button/StatefulButton.figma.tsx b/packages/code-connect/components/Button/StatefulButton.figma.tsx
new file mode 100644
index 00000000000..df6f853e1e3
--- /dev/null
+++ b/packages/code-connect/components/Button/StatefulButton.figma.tsx
@@ -0,0 +1,28 @@
+import figma from '@figma/code-connect';
+import { Button } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+// Stateful Button
+figma.connect(
+ Button,
+ 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=5805-20130',
+ {
+ props: {
+ state: figma.enum('Type', {
+ Read: 'read',
+ Unread: 'unread',
+ 'Unread - Needs attention': 'attention'
+ }),
+ icon: figma.boolean('Icon', {
+ true: ,
+ false: undefined
+ }),
+ count: figma.string('Value')
+ },
+ example: (props) => (
+
+ )
+ }
+);
diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json
index 2537e14be2b..a366fb46c32 100644
--- a/packages/code-connect/figma.config.json
+++ b/packages/code-connect/figma.config.json
@@ -1,13 +1,10 @@
{
"codeConnect": {
"parser": "react",
- "include": [
- "components/DatePicker/*.tsx",
- "components/EmptyState/*.tsx",
- "components/FileUpload/*.tsx",
- "components/Hint/*.tsx",
- "components/InlineEdit/*.tsx"
- ],
+ "include": ["components/Button/*.tsx"],
+ "documentUrlSubstitutions": {
+ "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/Em2QWrHDxDS4LUxo58Hust/PatternFly-6--Components"
+ },
"paths": {
"src/components": "src/components"
},
@@ -30,4 +27,4 @@
}
}
}
-}
\ No newline at end of file
+}