Skip to content
Primer Design System

Primer Design System

Button group

Button group renders a series of buttons.

On this page

v0.23.0BetaNot reviewed for accessibility

Description

Use ButtonGroup to render a series of buttons.

Arguments

NameDefaultDescription
scheme

:default

Symbol

DEPRECATED. One of :danger, :default, :invisible, :link, :primary, or :secondary.

size

:medium

Symbol

One of :large, :medium, or :small.

system_arguments

N/A

Hash

System arguments

Examples

Slots

buttons

List of buttons to be rendered. Add buttons via the #with_button, #with_menu_button, and #with_clipboard_copy_button methods (see below).

Methods

with_button

Adds a button.

NameDefaultDescription
icon

nil

Symbol

If included, adds a IconButton with the given Octicons. Otherwise, a Button is added instead.

system_arguments

N/A

Hash

The arguments accepted by Button or IconButton, depending on the value of the icon: argument.

with_menu_button

Adds a button that activates a menu when clicked.

NameDefaultDescription
system_arguments

N/A

Hash

The arguments accepted by ButtonGroup::MenuButton.

with_clipboard_copy_button

Adds a ClipboardCopyButton.

NameDefaultDescription
system_arguments

N/A

Hash

The arguments accepted by ClipboardCopyButton.

ButtonGroup::MenuButton

Renders a button in a ButtonGroup that displays an ActionMenu when clicked. This component should not be used outside of a ButtonGroup context.

This component yields both the button and the list to the block when rendered.

<%= render(Primer::Beta::ButtonGroup.new) do |group| %>
  <% group.with_menu_button do |menu, button| %>
    <% menu.with_item(label: "Item 1") %>
    <% button.with_trailing_visual_icon(icon: "triangle-down") %>
  <% end %>
<% end %>

Arguments

NameDefaultDescription
menu_arguments

{}

Hash

The arguments accepted by ActionMenu.

button_arguments

{}

Hash

The arguments accepted by Button or IconButton, depending on the value of the icon: argument.