primer · langermank · Jun 9, 2023 · Feb 10, 2023 · Feb 10, 2023 · Feb 10, 2023
diff --git a/.changeset/flat-onions-sort.md b/.changeset/flat-onions-sort.md
@@ -0,0 +1,7 @@
+---
+"@primer/react": major
+---
+
+- Changes `leadingIcon` and `trailingIcon` to `leadingVisual` and `trailingVisual`
+- Removes `Button.Counter` as a child component, replacing it with a `count` prop. This change allows us to use the `trailingVisual` slot for counters.
+- Removes the `outline` button variant as we wish to only support `invisible` buttons.
diff --git a/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png b/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png
diff --git a/...Menu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png b/...Menu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png
diff --git a/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png b/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png
diff --git a/.../ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png b/.../ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png
diff --git a/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png b/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png
diff --git a/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png b/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png
diff --git a/...t.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png b/...t.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png
diff --git a/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png b/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png b/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-colorblind-linux.png
diff --git a/...onents/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png b/...onents/Button.test.ts-snapshots/Button-Invisible-Variants-dark-dimmed-linux.png
diff --git a/...Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png b/...Button.test.ts-snapshots/Button-Invisible-Variants-dark-high-contrast-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png b/...ts/components/Button.test.ts-snapshots/Button-Invisible-Variants-dark-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png b/...ts/Button.test.ts-snapshots/Button-Invisible-Variants-dark-tritanopia-linux.png
diff --git a/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png b/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-colorblind-linux.png
diff --git a/...utton.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png b/...utton.test.ts-snapshots/Button-Invisible-Variants-light-high-contrast-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png b/...s/components/Button.test.ts-snapshots/Button-Invisible-Variants-light-linux.png
diff --git a/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png b/...s/Button.test.ts-snapshots/Button-Invisible-Variants-light-tritanopia-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png b/...ts/components/Button.test.ts-snapshots/Button-Outline-dark-colorblind-linux.png
diff --git a/...pshots/components/Button.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png b/...pshots/components/Button.test.ts-snapshots/Button-Outline-dark-dimmed-linux.png
diff --git a/...components/Button.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png b/...components/Button.test.ts-snapshots/Button-Outline-dark-high-contrast-linux.png
diff --git a/...ght/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-linux.png b/...ght/snapshots/components/Button.test.ts-snapshots/Button-Outline-dark-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png b/...ts/components/Button.test.ts-snapshots/Button-Outline-dark-tritanopia-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Outline-light-colorblind-linux.png b/...s/components/Button.test.ts-snapshots/Button-Outline-light-colorblind-linux.png
diff --git a/...omponents/Button.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png b/...omponents/Button.test.ts-snapshots/Button-Outline-light-high-contrast-linux.png
diff --git a/...ht/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-linux.png b/...ht/snapshots/components/Button.test.ts-snapshots/Button-Outline-light-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png b/...s/components/Button.test.ts-snapshots/Button-Outline-light-tritanopia-linux.png
diff --git a/...components/Button.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png b/...components/Button.test.ts-snapshots/Button-Playground-dark-colorblind-linux.png
diff --git a/...ots/components/Button.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png b/...ots/components/Button.test.ts-snapshots/Button-Playground-dark-dimmed-linux.png
diff --git a/...ponents/Button.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png b/...ponents/Button.test.ts-snapshots/Button-Playground-dark-high-contrast-linux.png
diff --git a/.../snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-linux.png b/.../snapshots/components/Button.test.ts-snapshots/Button-Playground-dark-linux.png
diff --git a/...components/Button.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png b/...components/Button.test.ts-snapshots/Button-Playground-dark-tritanopia-linux.png
diff --git a/...omponents/Button.test.ts-snapshots/Button-Playground-light-colorblind-linux.png b/...omponents/Button.test.ts-snapshots/Button-Playground-light-colorblind-linux.png
diff --git a/...onents/Button.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png b/...onents/Button.test.ts-snapshots/Button-Playground-light-high-contrast-linux.png
diff --git a/...snapshots/components/Button.test.ts-snapshots/Button-Playground-light-linux.png b/...snapshots/components/Button.test.ts-snapshots/Button-Playground-light-linux.png
diff --git a/...omponents/Button.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png b/...omponents/Button.test.ts-snapshots/Button-Playground-light-tritanopia-linux.png
diff --git a/...ts/Button.test.ts-snapshots/Button-Trailing-Visual-dark-high-contrast-linux.png b/...ts/Button.test.ts-snapshots/Button-Trailing-Visual-dark-high-contrast-linux.png
diff --git a/...s/Button.test.ts-snapshots/Button-Trailing-Visual-light-high-contrast-linux.png b/...s/Button.test.ts-snapshots/Button-Trailing-Visual-light-high-contrast-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png b/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-colorblind-linux.png
diff --git a/...pshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png b/...pshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-dimmed-linux.png
diff --git a/...components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png b/...components/Button.test.ts-snapshots/Button-sx-prop-dark-high-contrast-linux.png
diff --git a/...ght/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png b/...ght/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-dark-linux.png
diff --git a/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png b/...ts/components/Button.test.ts-snapshots/Button-sx-prop-dark-tritanopia-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png b/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-colorblind-linux.png
diff --git a/...omponents/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png b/...omponents/Button.test.ts-snapshots/Button-sx-prop-light-high-contrast-linux.png
diff --git a/...ht/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png b/...ht/snapshots/components/Button.test.ts-snapshots/Button-sx-prop-light-linux.png
diff --git a/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png b/...s/components/Button.test.ts-snapshots/Button-sx-prop-light-tritanopia-linux.png
diff --git a/...nents/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-colorblind-linux.png b/...nents/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-colorblind-linux.png
diff --git a/...omponents/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-dimmed-linux.png b/...omponents/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-dimmed-linux.png
diff --git a/...ts/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-high-contrast-linux.png b/...ts/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-high-contrast-linux.png
diff --git a/...shots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-linux.png b/...shots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-linux.png
diff --git a/...nents/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-tritanopia-linux.png b/...nents/LinkButton.test.ts-snapshots/LinkButton-Outline-dark-tritanopia-linux.png
diff --git a/...ents/LinkButton.test.ts-snapshots/LinkButton-Outline-light-colorblind-linux.png b/...ents/LinkButton.test.ts-snapshots/LinkButton-Outline-light-colorblind-linux.png
diff --git a/...s/LinkButton.test.ts-snapshots/LinkButton-Outline-light-high-contrast-linux.png b/...s/LinkButton.test.ts-snapshots/LinkButton-Outline-light-high-contrast-linux.png
diff --git a/...hots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-linux.png b/...hots/components/LinkButton.test.ts-snapshots/LinkButton-Outline-light-linux.png
diff --git a/...ents/LinkButton.test.ts-snapshots/LinkButton-Outline-light-tritanopia-linux.png b/...ents/LinkButton.test.ts-snapshots/LinkButton-Outline-light-tritanopia-linux.png
diff --git a/...utton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-high-contrast-linux.png b/...utton.test.ts-snapshots/LinkButton-Trailing-Visual-dark-high-contrast-linux.png
diff --git a/...tton.test.ts-snapshots/LinkButton-Trailing-Visual-light-high-contrast-linux.png b/...tton.test.ts-snapshots/LinkButton-Trailing-Visual-light-high-contrast-linux.png
diff --git a/.../PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-colorblind-linux.png b/.../PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-colorblind-linux.png
diff --git a/...ents/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-dimmed-linux.png b/...ents/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-dimmed-linux.png
diff --git a/...geHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png b/...geHeader.test.ts-snapshots/PageHeader-With-Actions-dark-high-contrast-linux.png
diff --git a/.../components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-linux.png b/.../components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-linux.png
diff --git a/.../PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-tritanopia-linux.png b/.../PageHeader.test.ts-snapshots/PageHeader-With-Actions-dark-tritanopia-linux.png
diff --git a/...PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-colorblind-linux.png b/...PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-colorblind-linux.png
diff --git a/...eHeader.test.ts-snapshots/PageHeader-With-Actions-light-high-contrast-linux.png b/...eHeader.test.ts-snapshots/PageHeader-With-Actions-light-high-contrast-linux.png
diff --git a/...components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-linux.png b/...components/PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-linux.png
diff --git a/...PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-tritanopia-linux.png b/...PageHeader.test.ts-snapshots/PageHeader-With-Actions-light-tritanopia-linux.png
diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx
@@ -190,7 +190,7 @@ const Example = () => {
 
  return (
  <ActionMenu>
- <ActionMenu.Button leadingIcon={selectedType.icon}>{selectedType.name}</ActionMenu.Button>
+ <ActionMenu.Button leadingVisual={selectedType.icon}>{selectedType.name}</ActionMenu.Button>
  <ActionMenu.Overlay width="medium">
  <ActionList selectionVariant="single">
  {fieldTypes.map((type, index) => (

diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx
@@ -31,14 +31,6 @@ The `danger` variant of `Button` is used to warn users about potentially destruc
 <Button variant="danger">Danger</Button>
 ```
 
-### Outline button
-
-The `outline` variant of `Button` is typically used as a secondary button
-
-```jsx live
-<Button variant="outline">Outline</Button>
-```
-
 ### Invisible button
 
 The `invisible` variant of `Button` indicates that the action is a low priority one.
@@ -68,11 +60,11 @@ It is recommended to use an octicon here.
 
 ```jsx live
 <>
- <Button leadingIcon={SearchIcon}>Search</Button>
- <Button trailingIcon={SearchIcon} sx={{mt: 2}}>
+ <Button leadingVisual={SearchIcon}>Search</Button>
+ <Button trailingVisual={SearchIcon} sx={{mt: 2}}>
  Search
  </Button>
- <Button leadingIcon={SearchIcon} trailingIcon={CheckIcon} sx={{mt: 2}}>
+ <Button leadingVisual={SearchIcon} trailingVisual={CheckIcon} sx={{mt: 2}}>
  Search
  </Button>
 </>
@@ -98,17 +90,12 @@ A separate component called `IconButton` is used if the action shows only an ico
 </>
 ```
 
-### Counter component
+### Button with counter
 
-A common use case for primer is a button with a counter component which shows the child count value.
-We provide `Button.Counter` as a composite component which requires you to provide a number as child.
-The counter will match the `variant` styles of the parent button.
+To show a count value as a trailing visual inside `Button`, pass a value to the `count` prop. The counter will match the `variant` styles of the parent button.
 
 ```jsx live
-<Button>
- Watch
- <Button.Counter>1</Button.Counter>
-</Button>
+<Button count="1">Watch</Button>
 ```
 
 ### Block button

diff --git a/docs/content/drafts/PageHeader.mdx b/docs/content/drafts/PageHeader.mdx
@@ -125,7 +125,7 @@ import {PageHeader} from '@primer/react/drafts'
  <PageHeader.Actions>
  <IconButton aria-label="Workflows" icon={WorkflowIcon} />
  <IconButton aria-label="Insights" icon={GraphIcon} />
- <Button variant="primary" trailingIcon={TriangleDownIcon}>
+ <Button variant="primary" trailingVisual={TriangleDownIcon}>
  Add Item
  </Button>
  <IconButton aria-label="Settings" icon={GearIcon} />
@@ -212,7 +212,7 @@ import {PageHeader} from '@primer/react/drafts'
  <PageHeader.ParentLink href="http://github.com">Parent Link</PageHeader.ParentLink>
 
  <PageHeader.ContextAreaActions>
- <Button size="small" leadingIcon={GitBranchIcon}>
+ <Button size="small" leadingVisual={GitBranchIcon}>
  Main
  </Button>
  <IconButton size="small" aria-label="More Options" icon={KebabHorizontalIcon} />
@@ -241,7 +241,7 @@ import {PageHeader} from '@primer/react/drafts'
  </PageHeader.ContextBar>
 
  <PageHeader.ContextAreaActions>
- <Button size="small" leadingIcon={GitBranchIcon}>
+ <Button size="small" leadingVisual={GitBranchIcon}>
  Main
  </Button>
  <IconButton size="small" aria-label="More Options" icon={KebabHorizontalIcon} />
@@ -274,7 +274,7 @@ import {PageHeader} from '@primer/react/drafts'
  </PageHeader.ContextBar>
 
  <PageHeader.ContextAreaActions hidden={false}>
- <Button size="small" leadingIcon={GitBranchIcon}>
+ <Button size="small" leadingVisual={GitBranchIcon}>
  Main
  </Button>
  <IconButton size="small" aria-label="More Options" icon={KebabHorizontalIcon} />

diff --git a/e2e/components/Button.test.ts b/e2e/components/Button.test.ts
@@ -275,40 +275,6 @@ test.describe('Button', () => {
  }
  })
 
- test.describe('Outline', () => {
- for (const theme of themes) {
- test.describe(theme, () => {
- test('default @vrt', async ({page}) => {
- await visit(page, {
- id: 'components-button-features--outline',
- globals: {
- colorScheme: theme,
- },
- })
-
- // Default state
- expect(await page.screenshot()).toMatchSnapshot(`Button.Outline.${theme}.png`)
- })
-
- test('axe @aat', async ({page}) => {
- await visit(page, {
- id: 'components-button-features--outline',
- globals: {
- colorScheme: theme,
- },
- })
- await expect(page).toHaveNoViolations({
- rules: {
- 'color-contrast': {
- enabled: theme !== 'dark_dimmed',
- },
- },
- })
- })
- })
- }
- })
-
  test.describe('Primary', () => {
  for (const theme of themes) {
  test.describe(theme, () => {

diff --git a/e2e/components/LinkButton.test.ts b/e2e/components/LinkButton.test.ts
@@ -241,40 +241,6 @@ test.describe('LinkButton', () => {
  }
  })
 
- test.describe('Outline', () => {
- for (const theme of themes) {
- test.describe(theme, () => {
- test('default @vrt', async ({page}) => {
- await visit(page, {
- id: 'components-linkbutton-features--outline',
- globals: {
- colorScheme: theme,
- },
- })
-
- // Default state
- expect(await page.screenshot()).toMatchSnapshot(`LinkButton.Outline.${theme}.png`)
- })
-
- test('axe @aat', async ({page}) => {
- await visit(page, {
- id: 'components-linkbutton-features--outline',
- globals: {
- colorScheme: theme,
- },
- })
- await expect(page).toHaveNoViolations({
- rules: {
- 'color-contrast': {
- enabled: theme !== 'dark_dimmed',
- },
- },
- })
- })
- })
- }
- })
-
  test.describe('Primary', () => {
  for (const theme of themes) {
  test.describe(theme, () => {

diff --git a/generated/components.json b/generated/components.json
@@ -884,6 +884,12 @@
  "type": "React.ReactNode",
  "description": "The content of the button."
  },
+ {
+ "name": "count",
+ "required": true,
+ "type": "number | string",
+ "description": "For counter buttons, the number to display."
+ },
  {
  "name": "variant",
  "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'",
@@ -922,24 +928,7 @@
  "passthrough": {
  "element": "button",
  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes"
- },
- "subcomponents": [
- {
- "name": "Button.Counter",
- "props": [
- {
- "name": "children",
- "required": true,
- "type": "number",
- "description": "The counter value."
- },
- {
- "name": "sx",
- "type": "SystemStyleObject"
- }
- ]
- }
- ]
+ }
  },
  "icon_button": {
  "id": "icon_button",

diff --git a/src/ActionMenu/ActionMenu.examples.stories.tsx b/src/ActionMenu/ActionMenu.examples.stories.tsx
@@ -30,7 +30,7 @@ export const GroupsAndDescriptions = () => {
 
  return (
  <ActionMenu open>
- <ActionMenu.Button variant="default" trailingIcon={GearIcon}>
+ <ActionMenu.Button variant="default" trailingVisual={GearIcon}>
  Milestone
  </ActionMenu.Button>
  <ActionMenu.Overlay width="medium">
@@ -201,7 +201,7 @@ export const MixedSelection = () => {
 
  return (
  <ActionMenu>
- <ActionMenu.Button leadingIcon={selectedOption ? selectedOption.icon : undefined}>
+ <ActionMenu.Button leadingVisual={selectedOption ? selectedOption.icon : undefined}>
  {selectedOption ? `Group by ${selectedOption.text}` : 'Group items by'}
  </ActionMenu.Button>
  <ActionMenu.Overlay width="medium">

diff --git a/src/Button/Button.dev.stories.tsx b/src/Button/Button.dev.stories.tsx
@@ -11,23 +11,20 @@ export const InvisibleVariants = () => {
  return (
  <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
  <Button variant="invisible">Button</Button>
- <Button variant="invisible" leadingIcon={SearchIcon}>
+ <Button variant="invisible" leadingVisual={SearchIcon}>
  Button
  </Button>
  <Button variant="invisible" trailingAction={TriangleDownIcon}>
  Button
  </Button>
- <Button variant="primary">
+ <Button variant="primary" count={count}>
  Button
- <Button.Counter>{count}</Button.Counter>
  </Button>
- <Button variant="invisible" leadingIcon={EyeIcon}>
+ <Button variant="invisible" leadingVisual={EyeIcon} count={count}>
  Button
- <Button.Counter>{count}</Button.Counter>
  </Button>
- <Button variant="invisible" leadingIcon={EyeIcon} trailingAction={TriangleDownIcon}>
+ <Button variant="invisible" leadingVisual={EyeIcon} trailingAction={TriangleDownIcon} count={count}>
  Button
- <Button.Counter>{count}</Button.Counter>
  </Button>
  <IconButton icon={TriangleDownIcon} variant="invisible" aria-label="Invisible" />
  </div>
@@ -67,7 +64,7 @@ export const TestSxProp = () => {
  >
  Pink
  </Button>
- <Button leadingIcon={SearchIcon} variant="invisible" sx={{color: 'deeppink'}}>
+ <Button leadingVisual={SearchIcon} variant="invisible" sx={{color: 'deeppink'}}>
  Pink
  </Button>
  <Button
@@ -89,9 +86,8 @@ export const TestSxProp = () => {
  <Button size="small" block variant="invisible" sx={{width: 320}}>
  Overriden Block
  </Button>
- <Button>
+ <Button sx={{fontSize: 32}} count={count}>
  Watch
- <Button.Counter sx={{fontSize: 32}}>{count}</Button.Counter>
  </Button>
  </div>
  )

diff --git a/src/Button/Button.docs.json b/src/Button/Button.docs.json
@@ -11,6 +11,12 @@
  "type": "React.ReactNode",
  "description": "The content of the button."
  },
+ {
+ "name": "count",
+ "required": true,
+ "type": "number | string",
+ "description": "For counter buttons, the number to display."
+ },
  {
  "name": "variant",
  "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'",
@@ -49,22 +55,5 @@
  "passthrough": {
  "element": "button",
  "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes"
- },
- "subcomponents": [
- {
- "name": "Button.Counter",
- "props": [
- {
- "name": "children",
- "required": true,
- "type": "number",
- "description": "The counter value."
- },
- {
- "name": "sx",
- "type": "SystemStyleObject"
- }
- ]
- }
- ]
-}
+ }
+}