x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div data-view-component="true" class="ButtonGroup"> <div> <button id="button-1" 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><tool-tip id="tooltip-8c9ad200-6cf5-4779-8289-ccf8f2f78dd9" for="button-1" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">Button Tooltip</tool-tip> </div> <div> <a id="button-2" data-view-component="true" class="Button--secondary Button--medium Button"> <span class="Button-content"> <span class="Button-label">Button 2</span> </span> </a><tool-tip id="tooltip-e11df7ee-e572-48f2-8b2b-1125e690f74e" for="button-2" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">Button Tooltip</tool-tip> </div> <div> <summary id="button-3" data-view-component="true" class="Button--secondary Button--medium Button"> <span class="Button-content"> <span class="Button-label">Button 3</span> </span> </summary><tool-tip id="tooltip-ceb27979-cb74-4097-92bf-057148d98221" for="button-3" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">Button Tooltip</tool-tip> </div></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
render(Primer::Beta::ButtonGroup.new) do |component| component.with_button(id: "button-1", tag: :button) do |button| button.with_tooltip(text: "Button Tooltip") "Button 1" end component.with_button(id: "button-2", tag: :a) do |button| button.with_tooltip(text: "Button Tooltip") "Button 2" end component.with_button(id: "button-3", tag: :summary) do |button| button.with_tooltip(text: "Button Tooltip") "Button 3" endend
No notes provided.
No params configured.
app/components/primer/beta/button_group.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.ButtonGroup { display: inline-flex;}.ButtonGroup .Button { margin-inline-end: -1px; position: relative; border-radius: 0; }.ButtonGroup .Button:focus, .ButtonGroup .Button:active, .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); }