diff --git a/docs/src/stories/explorations/Button.stories.jsx b/docs/src/stories/explorations/Button.stories.jsx
new file mode 100644
index 0000000000..87e92c429c
--- /dev/null
+++ b/docs/src/stories/explorations/Button.stories.jsx
@@ -0,0 +1,207 @@
+import React from 'react'
+import clsx from 'clsx'
+
+export default {
+ title: 'Explorations/Button',
+ parameters: {
+ layout: 'padded'
+ },
+
+ excludeStories: ['ButtonTemplate'],
+ argTypes: {
+ variant: {
+ options: [0, 1, 2, 3], // iterator
+ mapping: ['Button--secondary', 'Button--primary', 'Button--invisible', 'Button--danger'], // values
+ control: {
+ type: 'inline-radio',
+ labels: ['secondary', 'primary', 'invisible', 'danger']
+ },
+ table: {
+ category: 'CSS'
+ },
+ description: 'Controls button color',
+ defaultValue: 'Button--secondary'
+ },
+ size: {
+ options: [0, 1, 2], // iterator
+ mapping: [null, 'Button--small', 'Button--large'], // values
+ control: {
+ type: 'inline-radio',
+ labels: ['default [32px]', 'small [28px]', 'large [40px]']
+ },
+ table: {
+ category: 'CSS'
+ },
+ description: 'Controls button height',
+ defaultValue: 0
+ },
+ alignContent: {
+ options: [0, 1], // iterator
+ mapping: [null, 'Button-content--alignStart'], // values
+ control: {
+ type: 'inline-radio',
+ labels: ['center [default]', 'start']
+ },
+ table: {
+ category: 'CSS'
+ },
+ description:
+ 'Align button label + visuals to the center (default for CTA buttons) or start for select/dropdown button scenarios',
+ defaultValue: 0
+ },
+ label: {
+ defaultValue: 'Button',
+ type: 'string',
+ name: 'label',
+ description: 'Visible button label',
+ table: {
+ category: 'Slot'
+ }
+ },
+ ariaLabel: {
+ defaultValue: '',
+ type: 'string',
+ name: 'ariaLabel',
+ description: 'Hidden button label (in addition to visible label). Not required in all cases.',
+ table: {
+ category: 'Slot'
+ }
+ },
+ disabled: {
+ defaultValue: false,
+ control: {type: 'boolean'},
+ table: {
+ category: 'State'
+ }
+ },
+ fullWidth: {
+ defaultValue: false,
+ control: {type: 'boolean'},
+ description: 'Allow button to stretch and fill container',
+ table: {
+ category: 'CSS'
+ }
+ },
+ leadingVisual: {
+ name: 'leadingVisual',
+ control: {type: 'boolean'},
+ description: 'Slot for SVG icon or emoji (boolean only for testing purposes)',
+ defaultValue: false,
+ table: {
+ category: 'Slot'
+ }
+ },
+ trailingVisual: {
+ name: 'trailingVisual',
+ control: {type: 'boolean'},
+ description: 'Slot for SVG icon or emoji (boolean only for testing purposes)',
+ table: {
+ category: 'Slot'
+ },
+ defaultValue: false
+ },
+ trailingAction: {
+ defaultValue: false,
+ control: {type: 'boolean'},
+ description:
+ 'Slot for SVG icon that indicates an action. Primarily used by other Primer components, like a DropdownMenu or overlay trigger (boolean only for testing purposes)',
+ table: {
+ category: 'Slot'
+ }
+ },
+ pressed: {
+ defaultValue: false,
+ control: {type: 'boolean'},
+ table: {
+ category: 'State'
+ }
+ },
+ focusElement: {
+ control: {type: 'boolean'},
+ description: 'set focus on one element',
+ table: {
+ category: 'State'
+ }
+ },
+ active: {
+ control: {type: 'boolean'},
+ description: 'set button to active state',
+ table: {
+ category: 'State'
+ }
+ }
+ }
+}
+
+const focusMethod = function getFocus() {
+ // find the focusable element
+ var button = document.getElementsByTagName('button')[0]
+ // set focus on element
+ button.focus()
+}
+
+const star = (
+
+)
+
+const caret = (
+
+)
+
+export const ButtonTemplate = ({
+ label,
+ variant,
+ disabled,
+ size,
+ fullWidth,
+ leadingVisual,
+ trailingVisual,
+ trailingAction,
+ pressed,
+ focusElement,
+ active,
+ className,
+ ariaLabel,
+ alignContent
+}) => (
+ <>
+
+ {focusElement && focusMethod()}
+
+)
+
+export const Playground = ButtonTemplate.bind({})
+Playground.args = {
+ focusElement: false,
+ active: false,
+ variant: 'Button--secondary',
+ leadingVisual: false,
+ trailingAction: false,
+ trailingVisual: false
+}
diff --git a/docs/src/stories/explorations/ButtonGroup.stories.jsx b/docs/src/stories/explorations/ButtonGroup.stories.jsx
new file mode 100644
index 0000000000..b91ae511cd
--- /dev/null
+++ b/docs/src/stories/explorations/ButtonGroup.stories.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import clsx from 'clsx'
+import {ButtonTemplate} from './Button.stories'
+import {IconButtonTemplate} from './IconButton.stories'
+
+export default {
+ title: 'Explorations/ButtonGroup',
+ excludeStories: ['ButtonGroupTemplate'],
+ layout: 'padded',
+ argTypes: {}
+}
+
+// build every component case here in the template (private api)
+export const ButtonGroupTemplate = ({}) => (
+
+
+
+
+
+
+)
+
+export const Playground = ButtonGroupTemplate.bind({})
+Playground.args = {}
diff --git a/docs/src/stories/explorations/ExampleSheet.stories.jsx b/docs/src/stories/explorations/ExampleSheet.stories.jsx
new file mode 100644
index 0000000000..2f539aa70f
--- /dev/null
+++ b/docs/src/stories/explorations/ExampleSheet.stories.jsx
@@ -0,0 +1,986 @@
+import React from 'react'
+import clsx from 'clsx'
+import {ButtonTemplate} from './Button.stories'
+import {IconButtonTemplate} from './IconButton.stories'
+import {LinkTemplate} from './Link.stories'
+import {LinkStyledAsButtonTemplate} from './LinkStyledAsButton.stories'
+import {ButtonGroupTemplate} from './ButtonGroup.stories'
+
+export default {
+ title: 'Explorations',
+ layout: 'padded',
+ argTypes: {}
+}
+
+const gridStyle = {
+ display: 'grid',
+ gridAutoFlow: 'column dense',
+ gap: '16px',
+ justifyItems: 'start'
+}
+
+const gridStyleStretch = {
+ display: 'grid',
+ gridAutoFlow: 'column',
+ gap: '16px',
+ justifyItems: 'start',
+ width: '100%'
+}
+
+export const ExampleSheet = ({}) => (
+
+
Standard
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Leading visual
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Trailing visual
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Leading + Trailing visual
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Trailing action
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Fullwidth (all visual scenarios, one button size)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Fullwidth (all visual scenarios, one button size) visualPosition fixed
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Leading visual + action
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Trailing visual + action
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Leading + Trailing visual + action
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
IconButton
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
LinkStyledAsButton
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Leading visual
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Trailing visual
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Leading + Trailing visual
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Trailing action
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Leading visual + action
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Trailing visual + action
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Leading + Trailing visual + action
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Link
+
+
+
+
+
+
+
+
+