Skip to content

Commit 6561965

Browse files
mrholekmrholek
committed
docs: update button groups examples
1 parent c5bf941 commit 6561965

File tree

1 file changed

+42
-41
lines changed

1 file changed

+42
-41
lines changed

‎packages/docs/content/components/button-group.mdx

Lines changed: 42 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import {
2828

2929
Wrap a series of `<CButton>` components in `<CButtonGroup>`.
3030

31+
3132
```jsx preview
3233
<CButtonGroup role="group" aria-label="Basic example">
3334
<CButton color="primary">Left</CButton>
@@ -48,7 +49,7 @@ These classes can also be added to groups of links, as an alternative to the `<C
4849
<CButtonGroup>
4950
<CButton href="#" color="primary" active>Active link</CButton>
5051
<CButton href="#" color="primary">Link</CButton>
51-
<CButton href="#" color="primary">Link</CButton>
52+
<CButton href="#" color="primary"> Link</CButton>
5253
</CButtonGroup>
5354
```
5455

@@ -154,30 +155,30 @@ Join sets of button groups into button toolbars for more complicated components.
154155
Feel free to combine input groups with button groups in your toolbars. Similar to the example above, you’ll likely need some utilities through to space items correctly.
155156

156157
```jsx preview
157-
<CButtonToolbar className="mb-3" role="group" aria-label="Toolbar with button groups">
158-
<CButtonGroup className="me-2" role="group" aria-label="First group">
159-
<CButton color="secondary" variant="outline">1</CButton>
160-
<CButton color="secondary" variant="outline">2</CButton>
161-
<CButton color="secondary" variant="outline">3</CButton>
162-
<CButton color="secondary" variant="outline">4</CButton>
163-
</CButtonGroup>
164-
<CInputGroup>
165-
<CInputGroupText>@</CInputGroupText>
166-
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
167-
</CInputGroup>
168-
</CButtonToolbar>
169-
<CButtonToolbar className="justify-content-between" role="group" aria-label="Toolbar with button groups">
170-
<CButtonGroup className="me-2" role="group" aria-label="First group">
171-
<CButton color="secondary" variant="outline">1</CButton>
172-
<CButton color="secondary" variant="outline">2</CButton>
173-
<CButton color="secondary" variant="outline">3</CButton>
174-
<CButton color="secondary" variant="outline">4</CButton>
175-
</CButtonGroup>
176-
<CInputGroup>
177-
<CInputGroupText>@</CInputGroupText>
178-
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
179-
</CInputGroup>
180-
</CButtonToolbar>
158+
<CButtonToolbar className="mb-3" role="group" aria-label="Toolbar with button groups">
159+
<CButtonGroup className="me-2" role="group" aria-label="First group">
160+
<CButton color="secondary" variant="outline">1</CButton>
161+
<CButton color="secondary" variant="outline">2</CButton>
162+
<CButton color="secondary" variant="outline">3</CButton>
163+
<CButton color="secondary" variant="outline">4</CButton>
164+
</CButtonGroup>
165+
<CInputGroup>
166+
<CInputGroupText>@</CInputGroupText>
167+
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
168+
</CInputGroup>
169+
</CButtonToolbar>
170+
<CButtonToolbar className="justify-content-between" role="group" aria-label="Toolbar with button groups">
171+
<CButtonGroup className="me-2" role="group" aria-label="First group">
172+
<CButton color="secondary" variant="outline">1</CButton>
173+
<CButton color="secondary" variant="outline">2</CButton>
174+
<CButton color="secondary" variant="outline">3</CButton>
175+
<CButton color="secondary" variant="outline">4</CButton>
176+
</CButtonGroup>
177+
<CInputGroup>
178+
<CInputGroupText>@</CInputGroupText>
179+
<CFormInput placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon"/>
180+
</CInputGroup>
181+
</CButtonToolbar>
181182
```
182183

183184
## Sizing
@@ -186,21 +187,21 @@ Alternatively, of implementing button sizing classes to each button in a group,
186187

187188
```jsx preview
188189
<CButtonGroup size="lg" role="group" aria-label="Large button group">
189-
<CButton color="dark" variant="outline">Left</CButton>
190-
<CButton color="dark" variant="outline">Middle</CButton>
191-
<CButton color="dark" variant="outline">Right</CButton>
190+
<CButton color="primary" variant="outline">Left</CButton>
191+
<CButton color="primary" variant="outline">Middle</CButton>
192+
<CButton color="primary" variant="outline">Right</CButton>
192193
</CButtonGroup>
193194
<br/>
194195
<CButtonGroup role="group" aria-label="Default button group">
195-
<CButton color="dark" variant="outline">Left</CButton>
196-
<CButton color="dark" variant="outline">Middle</CButton>
197-
<CButton color="dark" variant="outline">Right</CButton>
196+
<CButton color="primary" variant="outline">Left</CButton>
197+
<CButton color="primary" variant="outline">Middle</CButton>
198+
<CButton color="primary" variant="outline">Right</CButton>
198199
</CButtonGroup>
199200
<br/>
200201
<CButtonGroup size="sm" role="group" aria-label="Small button group">
201-
<CButton color="dark" variant="outline">Left</CButton>
202-
<CButton color="dark" variant="outline">Middle</CButton>
203-
<CButton color="dark" variant="outline">Right</CButton>
202+
<CButton color="primary" variant="outline">Left</CButton>
203+
<CButton color="primary" variant="outline">Middle</CButton>
204+
<CButton color="primary" variant="outline">Right</CButton>
204205
</CButtonGroup>
205206
```
206207

@@ -231,13 +232,13 @@ Create a set of buttons that appear vertically stacked rather than horizontally.
231232

232233
```jsx preview
233234
<CButtonGroup vertical role="group" aria-label="Vertical button group">
234-
<CButton color="dark">Button</CButton>
235-
<CButton color="dark">Button</CButton>
236-
<CButton color="dark">Button</CButton>
237-
<CButton color="dark">Button</CButton>
238-
<CButton color="dark">Button</CButton>
239-
<CButton color="dark">Button</CButton>
240-
<CButton color="dark">Button</CButton>
235+
<CButton color="primary">Button</CButton>
236+
<CButton color="primary">Button</CButton>
237+
<CButton color="primary">Button</CButton>
238+
<CButton color="primary">Button</CButton>
239+
<CButton color="primary">Button</CButton>
240+
<CButton color="primary">Button</CButton>
241+
<CButton color="primary">Button</CButton>
241242
</CButtonGroup>
242243
```
243244

0 commit comments

Comments
 (0)