ButtonComponent

import Example from ‘../../src/@primer/gatsby-theme-doctocat/components/example’

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

Arguments

Name	Type	Default	Description
`tag`	`Symbol`	`:button`	One of `:a`, `:button`, or `:summary`.
`type`	`Symbol`	`:button`	One of `:button`, `:reset`, or `:submit`.
`scheme`	`Symbol`	`:default`	One of `:danger`, `:default`, `:info`, `:link`, `:none`, `:success`, or `:warning`.
`size`	`Symbol`	`BaseButton::DEFAULT_SIZE`	One of `:lg`, `:md`, `:sm`, `:xl`, or `:xs`.
`dropdown`	`Boolean`	`false`	Whether or not to render a dropdown caret.
`classes`	`String`	`""`	Classes and attributes
`attributes`	`Hash`	`{}`	Classes and attributes

Slots

`Icon`

Leading visuals appear to the left of the button text.

Use:

icon for a HeroiconComponent.

Name	Type	Default	Description
`tag`	`Symbol, String`	N/A	The rendered tag name
`classes`	`String`	N/A	Classes and attributes
`icon`	`String`	N/A	Name of Heroicon to use.
`variant`	`String`	N/A	One of `outline`, `solid`, or `mini`.
`attributes`	`Hash`	N/A	Same arguments as HeroiconComponent.

`Counter`

Trailing visuals appear to the right of the button text.

Use:

counter for a CounterComponent.

Name	Type	Default	Description
`tag`	`Symbol, String`	N/A	The rendered tag name
`classes`	`String`	N/A	Classes and attributes
`counter`	`Number`	N/A	The starting counter value
`attributes`	`Hash`	N/A	Same arguments as CounterComponent.

`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 TooltipComponent documentation for more information.

Name	Type	Default	Description
`tag`	`Symbol, String`	N/A	The rendered tag name
`text`	`String`	N/A	The text content of the tooltip. This should be brief and no longer than a sentence.
`direction`	`Symbol`	N/A	One of `:bottom`, `:left`, `:right`, or `:top`.
`classes`	`String`	N/A	Classes and attributes
`attributes`	`Hash`	N/A	Same arguments as TooltipComponent.

Examples

Schemes

<%= render(Ariadne::ButtonComponent.new) { "Default" } %>
<%= render(Ariadne::ButtonComponent.new(scheme: :default)) { "Default" } %>
<%= render(Ariadne::ButtonComponent.new(scheme: :info)) { "Info" } %>
<%= render(Ariadne::ButtonComponent.new(scheme: :success)) { "Success" } %>
<%= render(Ariadne::ButtonComponent.new(scheme: :warning)) { "Warning" } %>
<%= render(Ariadne::ButtonComponent.new(scheme: :danger)) { "Danger" } %>

Sizes

<%= render(Ariadne::ButtonComponent.new(size: :sm)) { "Small" } %>
<%= render(Ariadne::ButtonComponent.new(size: :md)) { "Medium" } %>

With leading visual

<%= render(Ariadne::ButtonComponent.new) do |c| %>
  <% c.icon(icon: :star, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, classes: "ariadne-text-yellow-600") %>
  Button
<% end %>

With trailing visual

<%= render(Ariadne::ButtonComponent.new) do |c| %>
  <% c.counter(count: 15) %>
  Button
<% end %>

With leading and trailing visuals

<%= render(Ariadne::ButtonComponent.new) do |c| %>
  <% c.icon(icon: :star, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
  <% c.counter(count: 15) %>
  Button
<% end %>

Use tooltips sparingly and as a last resort. Consult the TooltipComponent documentation for more information.

<%= render(Ariadne::ButtonComponent.new(attributes: { id: "button-with-tooltip" })) do |c| %>
  <% c.tooltip(text: "Tooltip text") %>
  Button
<% end %>

Ariadne