Skip to content

Button

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

Examples

Button types

<%= render(Primer::ButtonComponent.new) { "Default" } %>
<%= render(Primer::ButtonComponent.new(button_type: :primary)) { "Primary" } %>
<%= render(Primer::ButtonComponent.new(button_type: :danger)) { "Danger" } %>
<%= render(Primer::ButtonComponent.new(button_type: :outline)) { "Outline" } %>

Variants

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

Arguments

NameTypeDefaultDescription
button_typeSymbol:defaultOne of :default, :primary, :danger, or :outline.
variantSymbol:mediumOne of :small, :medium, or :large.
tagSymbol:buttonOne of :button, :a, or :summary.
typeSymbol:buttonOne of :button, :reset, or :submit.
group_itemBooleanfalseWhether button is part of a ButtonGroup.