Button

readyNot reviewed for a11y

Lookbook|Source

This page may be removed. Primer plans to move all Rails component documentation to Lookbook.

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

Name	Required	Description
base_button_class		`Class` The button class to render.
scheme		`Symbol` One of `:danger`, `:default`, `:invisible`, `:link`, `:primary`, or `:secondary`.
size		`Symbol` One of `:large`, `:medium`, or `:small`.
block		`Boolean` Whether button is full-width with `display: block`.
align_content		`Symbol` One of `:center` or `:start`.
tag		`Symbol` One of `:a`, `:button`, `:clipboard-copy`, or `:summary`.
type		`Symbol` One of `:button`, `:reset`, or `:submit`.
inactive		`Boolean` Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button.
disabled		`Boolean` Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.
label_wrap		`Boolean` Whether or not the button label text wraps and the button height expands.
system_arguments		`Hash` System arguments

Slots

`leading_visual`

Leading visuals appear to the left of the button text.

Use:

leading_visual_icon for a Primer::Beta::Octicon.
leading_visual_svg to render a SVG.

Name	Required	Description
system_arguments		`Hash` Same arguments as `Primer::Beta::Octicon`.

`trailing_visual`

Trailing visuals appear to the right of the button text.

Use:

trailing_visual_counter for a Primer::Beta::Counter.

Name	Required	Description
system_arguments		`Hash` Same arguments as `Primer::Beta::Counter`.

`trailing_action`

Trailing action appears to the right of the trailing visual.

Use:

trailing_action_icon for a Primer::Beta::Octicon.

Name	Required	Description
system_arguments		`Hash` Same arguments as `Primer::Beta::Octicon`.

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 Primer::Alpha::Tooltip documentation for more information.

Name	Required	Description
type		`Symbol` One of `:description` or `:label`.
system_arguments		`Hash` Same arguments as `Primer::Alpha::Tooltip`.