Use Button for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
Arguments
| Name | Type | Default | Description |
|---|
scheme | Symbol | :default | One of :danger, :default, :invisible, :link, :outline, or :primary. |
variant | Symbol | :medium | One of :large, :medium, or :small. |
tag | Symbol | :button | One of :a, :button, or :summary. |
type | Symbol | :button | One of :button, :reset, or :submit. |
group_item | Boolean | false | Whether button is part of a ButtonGroup. |
block | Boolean | false | Whether button is full-width with display: block. |
caret | Boolean | false | Whether or not to render a caret. |
system_arguments | Hash | N/A | System arguments |
Slots
Icon
Icon to be rendered in the button.
| Name | Type | Default | Description |
|---|
system_arguments | Hash | N/A | Same arguments as Octicon. |
Counter
Counter to be rendered in the button.
| Name | Type | Default | Description |
|---|
system_arguments | Hash | N/A | Same arguments as Counter. |
Examples
Schemes
<%= render(Primer::ButtonComponent.new) { "Default" } %>
<%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Primary" } %>
<%= render(Primer::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
<%= render(Primer::ButtonComponent.new(scheme: :outline)) { "Outline" } %>
<%= render(Primer::ButtonComponent.new(scheme: :invisible)) { "Invisible" } %>
<%= render(Primer::ButtonComponent.new(scheme: :link)) { "Link" } %>
Variants
<%= render(Primer::ButtonComponent.new(variant: :small)) { "Small" } %>
<%= render(Primer::ButtonComponent.new(variant: :medium)) { "Medium" } %>
<%= render(Primer::ButtonComponent.new(variant: :large)) { "Large" } %>
Block
<%= render(Primer::ButtonComponent.new(block: :true)) { "Block" } %>
<%= render(Primer::ButtonComponent.new(block: :true, scheme: :primary)) { "Primary block" } %>
With icons
<%= render(Primer::ButtonComponent.new) do |c| %>
<% c.icon(icon: :star) %>
Button
<% end %>
With counter
<%= render(Primer::ButtonComponent.new) do |c| %>
<% c.counter(count: 15) %>
Button
<% end %>
With icons and counter
<%= render(Primer::ButtonComponent.new) do |c| %>
<% c.icon(icon: :star) %>
<% c.counter(count: 15) %>
Button
<% end %>
With caret
<%= render(Primer::ButtonComponent.new(caret: true)) do %>
Button
<% end %>