Button

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

v0.22.0BetaNot reviewed for accessibility

Description

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

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.

system_arguments

N/A

Hash

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.