" language="jsx" style="position: relative; text-align: left; box-sizing: border-box; padding: 0px; overflow: hidden; white-space: pre; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; color: rgb(57, 58, 52); background-color: rgb(246, 248, 250); font-size: 85%; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-width: 0px 1px 1px; border-top-style: initial; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-color: rgb(208, 215, 222); border-image: initial;">
<IconButton aria-label="Search" icon={SearchIcon} />
IconButton
also supports the three different sizes. small
, medium
, large
.
<>
<IconButton aria-label="Search" icon={SearchIcon} size="small" />
<IconButton aria-label="Search" sx={{ml: 2}} icon={SearchIcon} />
<IconButton aria-label="Search" sx={{ml: 2}} icon={SearchIcon} size="large" />
</>
Name | Type | Default | Description |
---|
children Required | React.ReactNode | | This will be the Button description. |
variant | 'default' | 'primary' | 'danger' | 'outline' | 'invisible' | | Changes the look and feel of the button which is different for each variant |
size | 'small' | 'medium' | 'large' | | Changes the size of the icon button component |
icon | Component | | provide an octicon. It will be placed in the center of the button |
sx | SystemStyleObject | | |
- Component props and basic example usage of the component are documented on primer.style/react.
- Component does not have any unnecessary third-party dependencies.
- Component can adapt to different themes.
- Component can adapt to different screen sizes.
- Component has robust unit test coverage (100% where achievable).
- Component has visual regression coverage of its default and interactive states.
- Component does not introduce any axe violations.
- Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.
- Component is used in a production application.
- Common usage examples are documented on primer.style/react.
- Common usage examples are documented in storybook stories.
- Component has been reviewed by a systems designer and any resulting issues have been addressed.
- Component does not introduce any performance regressions.
- Component API has been stable with no breaking changes for at least one month.
- Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
- Component has corresponding design guidelines documented in the interface guidelines.
- Component has corresponding Figma component in the Primer Web library.
- Tooling (such as linters, codemods, etc.) exists to prevent further use of alternatives.