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)
Arguments
| Name | Default | Description |
|---|---|---|
icon | N/A | StringName of Octicons to use. |
tag | N/A | SymbolOne of |
scheme |
| SymbolOne of |
size |
| SymbolOne of |
disabled |
| BooleanWhether or not the button is disabled. If true, this option forces |
type | N/A | SymbolOne of |
aria-label | N/A | StringString that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information. |
aria-description | N/A | StringString 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 |
| BooleanWhether 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 |
| SymbolOne of |
system_arguments | N/A | Hash |