Button

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

v0.18.2DeprecatedNot 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

NameDefaultDescription
scheme

:default

Symbol

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

variant

nil

Symbol

DEPRECATED. One of :medium or :small.

size

:medium

Symbol

One of :medium or :small.

tag

:button

Symbol

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

type

:button

Symbol

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

group_item

false

Boolean

Whether button is part of a ButtonGroup.

block

false

Boolean

Whether button is full-width with display: block.

dropdown

false

Boolean

Whether or not to render a dropdown caret.

system_arguments

N/A

Hash

Slots

leading_visual

Leading visuals appear to the left of the button text.

Use:

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

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.

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