Skip to content
Primer Design System

Primer Design System

Icon button

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

On this page

v0.36.1DeprecatedNot 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