Skip to content
This component requires JavaScript to function. Please refer to the Installation section to set it up.

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.
variantSymbolnilDEPRECATED. One of :medium and :small.
sizeSymbol:mediumOne of :medium and :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.
dropdownBooleanfalseWhether or not to render a dropdown caret.
system_argumentsHashN/ASystem arguments

Slots

Leading_visual

Leading visuals appear to the left of the button text.

Use:

NameTypeDefaultDescription
system_argumentsHashN/ASame arguments as Octicon.

Trailing_visual

Trailing visuals appear to the right of the button text.

Use:

  • trailing_visual_counter for a Counter.
NameTypeDefaultDescription
system_argumentsHashN/ASame arguments as Counter.

Tooltip

Tooltip that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort. Important: This tooltip defaults to type: :description. In a few scenarios, type: :label may be more appropriate. Consult the Tooltip documentation for more information.

NameTypeDefaultDescription
typeSymbol:descriptionOne of :description and :label.
system_argumentsHashN/ASame arguments as Tooltip.

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

Sizes

<%= render(Primer::ButtonComponent.new(size: :small)) { "Small" } %>
<%= render(Primer::ButtonComponent.new(size: :medium)) { "Medium" } %>

Block

<%= render(Primer::ButtonComponent.new(block: :true)) { "Block" } %>
<%= render(Primer::ButtonComponent.new(block: :true, scheme: :primary)) { "Primary block" } %>

With leading visual

<%= render(Primer::ButtonComponent.new) do |c| %>
<% c.leading_visual_icon(icon: :star) %>
Button
<% end %>

With trailing visual

<%= render(Primer::ButtonComponent.new) do |c| %>
<% c.trailing_visual_counter(count: 15) %>
Button
<% end %>

With leading and trailing visuals

<%= render(Primer::ButtonComponent.new) do |c| %>
<% c.leading_visual_icon(icon: :star) %>
<% c.trailing_visual_counter(count: 15) %>
Button
<% end %>

With dropdown caret

<%= render(Primer::ButtonComponent.new(dropdown: true)) do %>
Button
<% end %>

With tooltip

Use tooltips sparingly and as a last resort. Consult the Tooltip documentation for more information.

<%= render(Primer::ButtonComponent.new(id: "button-with-tooltip")) do |c| %>
<% c.tooltip(text: "Tooltip text") %>
Button
<% end %>