Skip to content

Use Button for actions (e.g. in forms). Use links for destinations, or moving from one page to another.

Arguments

NameTypeDefaultDescription
schemeSymbol:defaultOne of :danger, :default, :invisible, :link, :outline, or :primary.
variantSymbol:mediumOne of :large, :medium, or :small.
tagSymbol:buttonOne of :a, :button, or :summary.
typeSymbol:buttonOne of :button, :reset, or :submit.
group_itemBooleanfalseWhether button is part of a ButtonGroup.
blockBooleanfalseWhether button is full-width with display: block.
caretBooleanfalseWhether or not to render a caret.
system_argumentsHashN/ASystem arguments

Slots

Icon

Icon to be rendered in the button.

NameTypeDefaultDescription
system_argumentsHashN/ASame arguments as Octicon.

Counter

Counter to be rendered in the button.

NameTypeDefaultDescription
system_argumentsHashN/ASame 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 %>