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