Skip to content
Primer/Interface guidelines
Design
Interface guidelinesOcticonsDesktopMobileCLI
Build
CSSReactReact BrandViewComponents
ContributeAbout

Icon button

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

On this page
v0.1.9BetaNot 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. IconButton will always render with a tooltip unless the tag is :summary.

Arguments

NameDefaultDescription
icon

N/A

String

Name of Octicons to use.

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.

tag

N/A

Symbol

One of :a, :button, 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.

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

View in Lookbook