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.13.2BetaNot reviewed for accessibility

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

NameDefaultDescription
icon

N/A

String

Name of Octicons to use.

tag

N/A

Symbol

One of :a, :button, or :summary.

wrapper_arguments

{}

Hash

Optional keyword arguments to be passed to the wrapper <div> tag.

scheme

:default

Symbol

One of :danger, :default, or :invisible.

size

:medium

Symbol

One of :large, :medium, or :small.

disabled

false

Boolean

Whether or not the button is disabled. If true, this option forces tag: to :button.

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.

show_tooltip

true

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

:s

Symbol

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

system_arguments

N/A

Hash

System arguments

Examples