Use IconButton to render Icon-only buttons without the default button styles.
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)
| 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 |
<%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search")) %>
<%= render(Primer::IconButton.new(icon: :search, "aria-label": "Search")) %><%= render(Primer::IconButton.new(icon: :trash, "aria-label": "Delete", scheme: :danger)) %>
<%= 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 %>