IconButton
An accessible button component with no text and only icon.
- Alpha
- Not reviewed for accessibility
This documentation is moving to a new home. Please update any link or bookmark that points to this page. The new content can be found
here.
import {IconButton} from '@primer/react'
A separate component called IconButton is used if the action shows only an icon with no text. This button will remain square in shape.
<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 |
| inactive | boolean | | Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button. |
| icon | Component | | provide an octicon. It will be placed in the center of the button |
| aria-label | string | | Use an aria label to describe the functionality of the button. Please refer to our guidance on alt text for tips on writing good alternative text. |
| 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.