IconButton

Beta

View source View storybook

On this page

Accessibility
Arguments
Examples

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

Arguments

Name	Type	Default	Description
`scheme`	`Symbol`	`:default`	One of `:danger` and `:default`.
`icon`	`String`	N/A	Name of Octicon to use.
`tag`	`Symbol`	N/A	One of `:a`, `:button`, or `:summary`.
`type`	`Symbol`	N/A	One of `:button`, `:reset`, or `:submit`.
`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

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 %>

Edit this page on GitHub