1
2
3
4
5
render(Primer::Beta::ButtonGroup.new(size: size)) do |component| component.with_button { "Button 1" } component.with_button { "Button 2" } component.with_button { "Button 3" }end<div data-view-component="true" class="ButtonGroup"> <div> <button type="button" data-view-component="true" class="Button--secondary Button--medium Button"> <span class="Button-content"> <span class="Button-label">Button 1</span> </span> </button> </div> <div> <button type="button" data-view-component="true" class="Button--secondary Button--medium Button"> <span class="Button-content"> <span class="Button-label">Button 2</span> </span> </button> </div> <div> <button type="button" data-view-component="true" class="Button--secondary Button--medium Button"> <span class="Button-content"> <span class="Button-label">Button 3</span> </span> </button> </div></div>render(Primer::Beta::ButtonGroup.new(size: size)) do |component| component.with_button { "Button 1" } component.with_button { "Button 2" } component.with_button { "Button 3" }endNo notes provided.
| Param | Description | Input |
|---|---|---|
|
— |
|
.ButtonGroup { display: inline-flex;}.ButtonGroup .Button { /* stylelint-disable-next-line primer/spacing */ margin-inline-end: -1px; position: relative; border-radius: 0; }:is(.ButtonGroup .Button):focus,:is(.ButtonGroup .Button):active,:is(.ButtonGroup .Button):hover { z-index: 1; }.ButtonGroup > :first-child .Button { border-top-left-radius: var(--borderRadius-medium); border-bottom-left-radius: var(--borderRadius-medium); }.ButtonGroup > :last-child .Button { border-top-right-radius: var(--borderRadius-medium); border-bottom-right-radius: var(--borderRadius-medium); }<lookbook-embed app="https://primer-lookbook.github.com/view-components/lookbook/" preview="Primer::Beta::ButtonGroupPreview" scenario="default"></lookbook-embed>