Skip to content

Button

Use button for the main actions on a page or form.
  • Beta
  • Not reviewed for accessibility

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, :primary, or :secondary.
sizeSymbol:mediumOne of :large, :medium, or :small.
blockBooleanfalseWhether button is full-width with display: block.
align_contentSymbol:centerOne of :center or :start.
tagSymbol:buttonOne of :a, :button, or :summary.
typeSymbol:buttonOne of :button, :reset, or :submit.
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.

trailing_action

Trailing action appears to the right of the trailing visual.

Use:

  • trailing_action_icon for a Octicon.
NameTypeDefaultDescription
system_argumentsHashN/ASame arguments as Octicon.

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 or :label.
system_argumentsHashN/ASame arguments as Tooltip.

Examples

Schemes

<%= render(Primer::Beta::Button.new) { "Default" } %>
<%= render(Primer::Beta::Button.new(scheme: :primary)) { "Primary" } %>
<%= render(Primer::Beta::Button.new(scheme: :danger)) { "Danger" } %>
<%= render(Primer::Beta::Button.new(scheme: :invisible)) { "Invisible" } %>

Sizes

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

Full width

<%= render(Primer::Beta::Button.new(block: :true)) { "Full width" } %>
<%= render(Primer::Beta::Button.new(block: :true, scheme: :primary)) { "Primary full width" } %>

With leading visual

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

With trailing visual

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

With leading and trailing visuals

<%= render(Primer::Beta::Button.new) do |c| %>
<% c.with_leading_visual_icon(icon: :star) %>
<% c.with_trailing_visual_counter(count: 15) %>
Button
<% end %>

With tooltip

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

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