UNPKG

@primer/react-brand

Version:

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

primer.style/brand

primer/brand

63 lines (35 loc) • 2.35 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
--- title: Button group description: Use the button group component to group related buttons together. keywords: ['buttons', 'control', 'action', 'group', 'paired'] --- ![An image showing a button group with a primary and a secondary button.](https://github.com/primer/brand/assets/6951037/3b8d5346-31d5-4820-baaf-056d9063f203) ## Usage Use button group to group a set of actions that are related between them or to a single application. E,g, "Log in" and "Sign up" or "Try it out" and "Learn more". Use button group to display a pair of primary and a secondary actions. The primary button is used for the main call to action while the secondary button is a related, less important action. **✅ Do** ![](https://github.com/primer/brand/assets/6951037/c69ae38e-819b-4e03-9b92-665a479f188a) _Use a primary button with a secondary button._ **❌ Don't** ![](https://github.com/primer/brand/assets/6951037/c4c5c0de-2a46-4dbb-802a-0a6739d31d3a) _Don’t place multiple primary buttons together._ **✅ Do** ![](https://github.com/primer/brand/assets/6951037/9918ba9b-57ea-4a32-b51b-2460554900a9) _Place the primary button at the beginning of a button group._ **❌ Don't** ![](https://github.com/primer/brand/assets/6951037/cb151d26-2597-45e7-b271-62d64c3c292d) _Don't place the primary button at the end of a button group._ **✅ Do** ![](https://github.com/primer/brand/assets/6951037/97f95652-8802-418a-bf4b-7d9800c038fc) _Stack the buttons vertically when there's not enough horizontal space._ **❌ Don't** ![](https://github.com/primer/brand/assets/6951037/ef165552-94e1-4377-a9db-d8e9355af4eb) _Don't stack the buttons horizontally when there's not enough space to avoid text wrapping._ ## Options ### Size The button group component has two sizes: `medium` and `large`. The `medium` size should be used for most cases. The `large` size should be used when the button group is used in large headings that introduces a page, as in the [Hero](../Hero/index.md) component. ## Related components - [Button](../Button/index.md): To display a button that performs an action. - Link: To display a link that navigates to another page. - [Hero](../Hero/index.md): To display a large heading and a description with a button group. - [CTA banner](../CTABanner/index.md): To draw attention to or create urgency around a user action.