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.36.1BetaNot 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

NameTypeDefaultDescription
base_button_class
Class

Primer::Beta::BaseButton

The button class to render.

scheme
Symbol

:default

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

size
Symbol

:medium

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

block
Boolean

false

Whether button is full-width with display: block.

align_content
Symbol

:center

One of :center or :start.

tag
Symbol

:button

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

type
Symbol

:button

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

disabled
Boolean

false

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

label_wrap
Boolean

false

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

system_arguments
Hash

N/A

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.

NameTypeDefaultDescription
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.
NameTypeDefaultDescription
system_arguments
Hash

N/A

Same arguments as Counter.

trailing_action

Trailing action appears to the right of the trailing visual.

Use:

  • trailing_action_icon for a Octicon.
NameTypeDefaultDescription
system_arguments
Hash

N/A

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.

NameTypeDefaultDescription
type
Symbol

:description

One of :description or :label.

system_arguments
Hash

N/A

Same arguments as Tooltip.