mirror of
https://github.com/primer/css.git
synced 2024-11-25 18:26:14 +03:00
0e74c3f3fa
* Add links to PVC
And break some bundles (e.g. navigation) apart
* Ignore some of the new pages
* Revert "Ignore some of the new pages"
This reverts commit 854802e7ca.
1.7 KiB
1.7 KiB
| title | path | status | source | rails | bundle |
|---|---|---|---|---|---|
| Button group | components/button-group | Stable | https://github.com/primer/css/tree/main/src/buttons | https://primer.style/view-components/components/beta/buttongroup | buttons |
Have a hankering for a series of buttons that are attached to one another? Wrap them in a .BtnGroup and the buttons will be rounded and spaced automatically.
<div class="BtnGroup d-block mb-2">
<button class="BtnGroup-item btn" type="button">Button</button>
<button class="BtnGroup-item btn" type="button">Button</button>
<button class="BtnGroup-item btn btn-danger" type="button">Danger</button>
</div>
<div class="BtnGroup d-block mb-2 ml-0">
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
<button class="BtnGroup-item btn btn-outline" type="button">Button</button>
</div>
Use BtnGroup-item btn btn-sm for a smaller BtnGroup items.
<div class="BtnGroup">
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
<button class="BtnGroup-item btn btn-sm" type="button">Button</button>
</div>
Add .BtnGroup-parent to parent elements, like <form>s or <details>s, within .BtnGroups for proper spacing and rounded corners.
<div class="BtnGroup">
<button class="btn BtnGroup-item" type="button">Button</button>
<form class="BtnGroup-parent">
<button class="btn BtnGroup-item" type="button">Button in a form</button>
</form>
<button class="btn BtnGroup-item" type="button">Button</button>
<button class="btn BtnGroup-item" type="button">Button</button>
</div>