Icon button
Icon button is used for buttons that show an icon in place of a text label.
On this page
Description
Use IconButton
to render Icon-only buttons without the default button styles.
IconButton
will always render with a tooltip unless the tag is :summary
.
Accessibility
IconButton
requires an aria-label
, which will provide assistive technologies with an accessible label.
The aria-label
should describe the action to be invoked rather than the icon itself. For instance,
if your IconButton
renders a magnifying glass icon and invokes a search action, the aria-label
should be
"Search"
instead of "Magnifying glass"
.
Either aria-label
or aria-description
will be used for the Tooltip
text, depending on which one is present.
Either aria-label
or aria-description
will be used for the Tooltip
text, depending on which one is present.
Learn more about best functional image practices (WAI Images)
Additional markup is required if setting the tag
argument to either :a
or :summary
.
:a
requires you to pass in anhref
attribute:summary
requires you to wrap the component in a<details>
element
Arguments
Name | Type | Default | Description |
---|---|---|---|
icon | String | N/A | Name of Octicons to use. |
tag | Symbol | N/A | One of |
scheme | Symbol |
| One of |
size | Symbol |
| One of |
disabled | Boolean |
| Whether or not the button is disabled. If true, this option forces |
type | Symbol | N/A | One of |
aria-label | String | N/A | String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information. |
aria-description | String | N/A | String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information. |
show_tooltip | Boolean |
| Whether or not to show a tooltip when this button is hovered. Tooltips should only be hidden if the aria label is redundant, i.e. if the icon has a widely understood definition. |
tooltip_direction | Symbol |
| One of |
system_arguments | Hash | N/A |