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" /></>
Native <button> HTML attributes are forwarded to the underlying React button component and are not listed below.
| 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 | Style overrides to apply to the component. See also overriding styles. |