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.22.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

NameDefaultDescription
scheme

:default

Symbol

One of :danger or :default.

icon

N/A

String

Name of Octicons to use.

tag

N/A

Symbol

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

type

N/A

Symbol

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

aria-label

N/A

String

String 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

String

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

:s

Symbol

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

box

false

Boolean

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

system_arguments

N/A

Hash

System arguments