Icon button
Icon button is used for buttons that show an icon in place of a text label.
On this page
- @primer/react@37.0.1
- Alpha
- Not reviewed for accessibility
On this page
Import
import {IconButton} from '@primer/react'
Examples
Props
IconButton
Name | Default | Description |
---|---|---|
childrenRequired | React.ReactNode This will be the Button description. | |
variant | 'default' | 'primary' | 'danger' | 'outline' | 'invisible' | 'link' 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. | |
keyshortcuts | string Keyboard shortcuts that trigger the button. Keyboard shortcut will be appended to the accessible name or description (depending on the tooltip type) of the button with a comma (i.e. Bold, Command+B) and it will be displayed in the tooltip. | |
tooltipDirection | 's' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw' The direction of the tooltip. |
sx | SystemStyleObject |