Skip to content
Primer/ViewComponents
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Development
CSSReactViewComponents
About
Getting started
ContributingSystem argumentsLintingMigrationStatuses
Components
AutoCompleteAutoCompleteItemAvatarAvatarStackBlankslateBorderBoxBoxBreadcrumbButtonButtonGroupButtonMarketingClipboardCopyCloseButtonCounterDetailsDropdownDropdownMenuFlashFlexFlexItemHeadingHiddenTextExpanderImageImageCropIconButtonLabelLayoutLinkLocalTimeMenuMarkdownOcticonOcticonSymbolsPopoverProgressBarSpinnerStateSubheadTabContainerTabNavTextTimeAgoTimelineItemTooltipTruncateUnderlineNav
GitHub
On this page

ButtonGroup

Beta
View sourceView storybook
On this page

Use ButtonGroup to render a series of buttons.

Arguments

NameTypeDefaultDescription
variantSymbol:mediumOne of :large, :medium, or :small.
system_argumentsHashN/ASystem arguments

Slots

Buttons

Required list of buttons to be rendered.

NameTypeDefaultDescription
kwargsHashN/AThe same arguments as Button except for variant and group_item.

Examples

Default

<%= render(Primer::ButtonGroup.new) do |component| %>
  <% component.button { "Default" } %>
  <% component.button(scheme: :primary) { "Primary" } %>
  <% component.button(scheme: :danger) { "Danger" } %>
  <% component.button(scheme: :outline) { "Outline" } %>
  <% component.button(classes: "custom-class") { "Custom class" } %>
<% end %>

Variants

<%= render(Primer::ButtonGroup.new(variant: :small)) do |component| %>
  <% component.button { "Default" } %>
  <% component.button(scheme: :primary) { "Primary" } %>
  <% component.button(scheme: :danger) { "Danger" } %>
  <% component.button(scheme: :outline) { "Outline" } %>
<% end %>


<%= render(Primer::ButtonGroup.new(variant: :large)) do |component| %>
  <% component.button { "Default" } %>
  <% component.button(scheme: :primary) { "Primary" } %>
  <% component.button(scheme: :danger) { "Danger" } %>
  <% component.button(scheme: :outline) { "Outline" } %>
<% end %>
Edit this page on GitHub