Skip to content
Primer Design System

Primer Design System

🎉 👀 New look, same Primer! Preview the new docs experience here and let us know what you think.

Icon button

Icon button is used for buttons that show an icon in place of a text label.

On this page

v0.40.0DeprecatedNot reviewed for accessibility
This component is deprecatedPlease consider using an alternative.

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. Learn more about best functional image practices (WAI Images)

Arguments

NameTypeDefaultDescription
scheme
Symbol

:default

One of :danger or :default.

icon
String

N/A

Name of Octicons to use.

tag
Symbol

N/A

One of :a, :button, :clipboard-copy, or :summary.

type
Symbol

N/A

One of :button, :reset, or :submit.

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.

tooltip_direction
Symbol

:s

One of :e, :n, :ne, :nw, :s, :se, :sw, or :w.

box
Boolean

false

Whether the button is in a BorderBox. If true, the button will have the Box-btn-octicon class.

system_arguments
Hash

N/A

System arguments