Skip to content

Use IconButton to render Icon-only buttons without the default button styles.

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 invokves a search action, the aria-label should be "Search" instead of "Magnifying glass". Learn more about best functional image practices (WAI Images)

Arguments

NameTypeDefaultDescription
schemeSymbol:defaultOne of :danger and :default.
iconStringN/AName of Octicon to use.
tagSymbolN/AOne of :a, :button, or :summary.
typeSymbolN/AOne of :button, :reset, or :submit.
boxBooleanfalseWhether the button is in a BorderBox. If true, the button will have the Box-btn-octicon class.
system_argumentsHashN/ASystem arguments

Examples

Default

<%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search")) %>

Schemes

<%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search")) %>
<%= render(Primer::IconButton.new(icon: :trash, "aria-label": "Delete", scheme: :danger)) %>

In a BorderBox

Body
<%= render(Primer::BorderBoxComponent.new) do |component| %>
<% component.body do %>
<%= render(Primer::Beta::Text.new(pr: 2)) { "Body" } %>
<%= render(Primer::IconButton.new(icon: :pencil, box: true, "aria-label": "Edit")) %>
<% end %>
<% end %>