Button

Table of contents

Examples
Arguments
Slots

Beta

View source View storybook

Table of contents

Examples
Arguments
Slots

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

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

Arguments

Name	Type	Default	Description
`scheme`	`Symbol`	`:default`	One of `:default`, `:primary`, `:danger`, `:outline`, `:invisible`, or `:link`.
`variant`	`Symbol`	`:medium`	One of `:small`, `:medium`, or `:large`.
`tag`	`Symbol`	N/A	One of `:button`, `:a`, or `:summary`.
`type`	`Symbol`	N/A	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`.
`caret`	`Boolean`	`false`	Whether or not to render a caret.

Slots

`Icon`

Icon to be rendered in the button.

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

`Counter`

Counter to be rendered in the button.

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

Edit this page on GitHub