1
2
3
4
render(Primer::Beta::ButtonGroup.new(size: size)) do |component| component.with_button { "Button 1" } component.with_button(icon: "triangle-down", "aria-label": "menu")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 id="icon-button-6cad1e64-47f5-4c7b-bb60-0d077fda53a8" aria-labelledby="tooltip-96afccb1-3ab2-4579-8eea-bbb9e1002ec0" type="button" data-view-component="true" class="Button Button--iconOnly Button--secondary Button--medium"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down Button-visual"> <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path> </svg> </button><tool-tip id="tooltip-96afccb1-3ab2-4579-8eea-bbb9e1002ec0" for="icon-button-6cad1e64-47f5-4c7b-bb60-0d077fda53a8" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">menu</tool-tip> </div></div>render(Primer::Beta::ButtonGroup.new(size: size)) do |component| component.with_button { "Button 1" } component.with_button(icon: "triangle-down", "aria-label": "menu")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="split_button"></lookbook-embed>