Support React element icons in IconButton by Copilot · Pull Request #8450 · primer/react

Copilot · 2026-09-28T18:25:42Z

IconButton’s component-only icon type prevents passing icons from Server Components. Accept React elements while preserving existing component-type usage:

<IconButton aria-label="Menu" icon={<KebabHorizontalIcon />} />

Changelog

New

IconButton: Accept React.ReactElement in the icon prop.

Changed

ActionBar: Handle React elements in inherited icon props, including overflow menus and menu-item visuals.
Documentation: Describe the Server Component-compatible icon form.

Removed

None.

Rollout strategy

Minor release; existing usage requires no migration.

Testing & Reviewing

Review element and component-type compatibility across tooltip, loading, and ActionBar overflow paths. ButtonBase already supports element rendering; its implementation is unchanged.

Fixes Support React elements in components like IconButton for server components #8447

changeset-bot · 2026-09-28T18:25:47Z

🦋 Changeset detected

Latest commit: 14c3ffe

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>

Updated IconButton and ActionBar to accept React elements as icons.

github-actions · 2026-09-28T19:01:11Z

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

joshblack

@copilot our stories to use the react element approach for these components instead of the other option

Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>

Copilot · 2026-09-28T19:23:31Z

@copilot our stories to use the react element approach for these components instead of the other option

Updated the IconButton and ActionBar stories to use JSX icon elements in a26b80d, including the playground’s icon selector. Build, type checking, lint, and 395 targeted tests passed.

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Note

This error may be related to your runner configuration. You can now configure runners for Copilot code review separately from Copilot cloud agent by creating a copilot-code-review.yml file with your setup steps. Read the docs for details.

primer-integration · 2026-09-28T20:07:16Z

Integration test results from github/github-ui PR:

Changes Waiting
CI Waiting
VRT Passed
Projects Waiting

joshblack

@copilot use React.ReactNode instead of ElementType

Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>

Copilot · 2026-10-06T15:28:07Z

@copilot use React.ReactNode instead of ElementType

Updated the icon API to use React.ReactNode while retaining component icon support. Commit: 14c3ffe.

joshblack · 2026-10-14T16:04:06Z

@copilot resolve the merge conflicts in this pull request

…-elements-in-iconbutton # Conflicts: # packages/react/src/Button/ButtonBase.tsx Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>

Copilot · 2026-10-14T16:15:26Z

@copilot resolve the merge conflicts in this pull request

Merged main and resolved the ButtonBase.tsx conflict, preserving both the ReactNode icon renderer and incoming feature-flag changes. Merge commit: 5536f82.

github-actions · 2026-10-15T15:38:42Z

⚠️ Action required

👋 Hi, there are new commits since the last successful integration test. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

Initial plan

346113d

Copilot AI assigned Copilot and joshblack Sep 28, 2026

Copilot started work on behalf of joshblack September 28, 2026 18:25

View session

Copilot AI linked an issue Sep 28, 2026 that may be closed by this pull request

Support React elements in components like IconButton for server components #8447

Closed

Support React element icons in IconButton and ActionBar

8062b70

Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Support React elements in IconButton for server components~~ Support React element icons in IconButton Sep 28, 2026

Copilot finished work on behalf of joshblack September 28, 2026 18:41

Copilot AI requested a review from joshblack September 28, 2026 18:41

Modify IconButton and ActionBar for React elements

3e9cb53

Updated IconButton and ActionBar to accept React elements as icons.

github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Sep 28, 2026

joshblack reviewed Sep 28, 2026

View reviewed changes

Copilot started work on behalf of joshblack September 28, 2026 19:02

View session

joshblack deployed to github-pages September 28, 2026 19:10 — with GitHub Actions

View deployment

github-actions Bot temporarily deployed to storybook-preview-8450 September 28, 2026 19:10 Inactive

Use React element icons in IconButton and ActionBar stories

a26b80d

Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>

Copilot finished work on behalf of joshblack September 28, 2026 19:24

Copilot AI requested a review from joshblack September 28, 2026 19:24

joshblack marked this pull request as ready for review September 28, 2026 19:26

Copilot AI lite review requested due to automatic review settings September 28, 2026 19:26

joshblack requested a review from a team as a code owner September 28, 2026 19:26

Copilot started reviewing on behalf of joshblack September 28, 2026 19:26

View session

Copilot AI deployed to github-pages September 28, 2026 19:35

View deployment

github-actions Bot temporarily deployed to storybook-preview-8450 September 28, 2026 19:35 Inactive

Copilot AI reviewed Sep 28, 2026

joshblack requested a review from francinelucca September 29, 2026 01:33

github-actions Bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 29, 2026

francinelucca approved these changes Sep 29, 2026

View reviewed changes

joshblack added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels Sep 29, 2026

joshblack added this pull request to the merge queue Oct 5, 2026

Copilot AI mentioned this pull request Oct 5, 2026

docs: prefer React elements for slot-based props #8490

Merged

1 task done

joshblack removed this pull request from the merge queue due to a manual request Oct 5, 2026

joshblack reviewed Oct 6, 2026

View reviewed changes

Copilot started work on behalf of joshblack October 6, 2026 15:13

View session

Use ReactNode for IconButton icons

14c3ffe

Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>

Copilot finished work on behalf of joshblack October 6, 2026 15:28

Copilot AI requested a review from joshblack October 6, 2026 15:28

Copilot started work on behalf of joshblack October 14, 2026 16:04

View session

Merge remote-tracking branch 'origin/main' into copilot/support-react…

5536f82

…-elements-in-iconbutton # Conflicts: # packages/react/src/Button/ButtonBase.tsx Co-authored-by: joshblack <3901764+joshblack@users.noreply.github.com>

Copilot finished work on behalf of joshblack October 14, 2026 16:16

github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 15, 2026

Copilot AI deployed to github-pages October 15, 2026 15:49

View deployment

github-actions Bot temporarily deployed to storybook-preview-8450 October 15, 2026 15:49 Inactive

joshblack added the integration-tests: skipped manually Changes in this PR do not require an integration test label Oct 15, 2026

joshblack added this pull request to the merge queue Oct 15, 2026

Merged via the queue into main with commit 1528a48 Oct 15, 2026
62 checks passed

joshblack deleted the copilot/support-react-elements-in-iconbutton branch October 15, 2026 16:32

primer Bot mentioned this pull request Oct 15, 2026

Release tracking #8543

Merged

Navigation Menu

Repository navigation

Support React element icons in IconButton - #8450

Support React element icons in IconButton#8450
joshblack merged 6 commits into
mainfrom
copilot/support-react-elements-in-iconbutton

Copilot AI commented Sep 28, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Sep 28, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 28, 2026

Uh oh!

joshblack left a comment

Uh oh!

Copilot AI commented Sep 28, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

primer-integration Bot commented Sep 28, 2026 •

edited

Loading

Uh oh!

Uh oh!

joshblack left a comment

Uh oh!

Copilot AI commented Oct 6, 2026

Uh oh!

joshblack commented Oct 14, 2026

Uh oh!

Copilot AI commented Oct 14, 2026

Uh oh!

github-actions Bot commented Oct 15, 2026

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

Copilot AI commented Sep 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Uh oh!

changeset-bot Bot commented Sep 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Sep 28, 2026

⚠️ Action required

Uh oh!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Sep 28, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

primer-integration Bot commented Sep 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Oct 6, 2026

Uh oh!

joshblack commented Oct 14, 2026

Uh oh!

Copilot AI commented Oct 14, 2026

Uh oh!

github-actions Bot commented Oct 15, 2026

⚠️ Action required

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Copilot AI commented Sep 28, 2026 •

edited

Loading

changeset-bot Bot commented Sep 28, 2026 •

edited

Loading

primer-integration Bot commented Sep 28, 2026 •

edited

Loading