Skip to content
Primer Design System

Primer Design System

Button

Button is used to initiate actions on a page or form.

On this page

v0.27.0BetaNot reviewed for accessibility

Description

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

Accessibility

Additional markup is required if setting the tag argument to either :a or :summary.

  • :a requires you to pass in an href attribute
  • :summary requires you to wrap the component in a <details> element

Arguments

NameDefaultDescription
base_button_class

Primer::Beta::BaseButton

Class

The button class to render.

scheme

:default

Symbol

One of :danger, :default, :invisible, :link, :primary, or :secondary.

size

:medium

Symbol

One of :large, :medium, or :small.

block

false

Boolean

Whether button is full-width with display: block.

align_content

:center

Symbol

One of :center or :start.

tag

:button

Symbol

One of :a, :button, :clipboard-copy, or :summary.

type

:button

Symbol

One of :button, :reset, or :submit.

disabled

false

Boolean

Whether or not the button is disabled. If true, this option forces tag: to :button.

label_wrap

false

Boolean

Whether or not the button label text wraps and the button height expands.

system_arguments

N/A

Hash

System arguments

Examples

Slots

leading_visual

Leading visuals appear to the left of the button text.

Use:

  • leading_visual_icon for a Octicon.

  • leading_visual_svg to render a SVG.

NameDefaultDescription
system_arguments

N/A

Hash

Same arguments as Octicon.

trailing_visual

Trailing visuals appear to the right of the button text.

Use:

  • trailing_visual_counter for a Counter.
NameDefaultDescription
system_arguments

N/A

Hash

Same arguments as Counter.

trailing_action

Trailing action appears to the right of the trailing visual.

Use:

  • trailing_action_icon for a Octicon.
NameDefaultDescription
system_arguments

N/A

Hash

Same 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.

NameDefaultDescription
type

:description

Symbol

One of :description or :label.

system_arguments

N/A

Hash

Same arguments as Tooltip.