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-55bf12ee-5468-4a4c-904a-cb2c6acb9e8b" 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-c417931f-ebcd-4d55-a46d-847d8133c103" 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-ae73aacf-d9ca-487a-bfb6-9c64d36023f7" 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,0.375rem); border-bottom-left-radius: var(--borderRadius-medium,0.375rem); }.ButtonGroup > :last-child .Button { border-top-right-radius: var(--borderRadius-medium,0.375rem); border-bottom-right-radius: var(--borderRadius-medium,0.375rem); }