Button

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

v0.36.1DeprecatedNot reviewed for accessibility
This component is deprecatedPlease consider using an alternative.

Description

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

Arguments

NameTypeDefaultDescription
scheme
Symbol

:default

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

variant
Symbol

nil

DEPRECATED. One of :medium or :small.

size
Symbol

:medium

One of :medium or :small.

tag
Symbol

:button

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

type
Symbol

:button

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.

dropdown
Boolean

false

Whether or not to render a dropdown caret.

system_arguments
Hash

N/A

Slots

leading_visual

Leading visuals appear to the left of the button text.

Use:

  • leading_visual_icon for a Octicon.
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.

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.

Methods

icon

remove alias when all buttons are migrated to new slot names

counter

remove alias when all buttons are migrated to new slot names