Design

Interface guidelines Octicons Presentations Command line Mobile Desktop

Build

CSS React React Brand ViewComponents

Contribute About

On this page

Button

Use button for the main actions on a page or form.

Deprecated
Not reviewed for accessibility

Source

On this page

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

Name	Type	Default	Description
`scheme`	`Symbol`	`:default`	One of `:danger`, `:default`, `:invisible`, `:link`, `:outline`, or `:primary`.
`variant`	`Symbol`	`nil`	DEPRECATED. One of `:medium` or `:small`.
`size`	`Symbol`	`:medium`	One of `: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`.
`dropdown`	`Boolean`	`false`	Whether or not to render a dropdown caret.
`system_arguments`	`Hash`	N/A	System arguments

Slots

`leading_visual`

Leading visuals appear to the left of the button text.

Use:

leading_visual_icon for a Octicon.

Name	Type	Default	Description
`system_arguments`	`Hash`	N/A	Same arguments as Octicon.

`trailing_visual`

Trailing visuals appear to the right of the button text.

Use:

trailing_visual_counter for a Counter.

Name	Type	Default	Description
`system_arguments`	`Hash`	N/A	Same 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.

Name	Type	Default	Description
`type`	`Symbol`	`:description`	One of `:description` or `:label`.
`system_arguments`	`Hash`	N/A	Same 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 |component| %>
  <% component.with_leading_visual_icon(icon: :star) %>
  Button
<% end %>

With trailing visual

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

With leading and trailing visuals

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

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

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

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

Edit this page on GitHub