arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(button-group): update

Browse Source
This commit is contained in:
Benjamin Canac
2024-07-18 14:12:17 +02:00
parent ff678d6004
commit 82ea62bb23
8 changed files with 137 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
docs/content/3.components/button-group.md
View File

@@ -9,8 +9,87 @@ links:
## Usage
Wrap multiple [Button](/components/button) within a ButtonGroup to group them together.
::component-code
---
slots:
default: |
<UButton color="gray" variant="subtle" label="Button" />
<UButton color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
---
:u-button{color="gray" variant="subtle" label="Button"}
:u-button{color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
::
### Size
Use the `size` prop to change the size of all the buttons.
::component-code
---
props:
size: md
slots:
default: |
<UButton color="gray" variant="subtle" label="Button" />
<UButton color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid" />
---
:u-button{color="gray" variant="subtle" label="Button"}
:u-button{color="gray" variant="outline" icon="i-heroicons-chevron-down-20-solid"}
::
### Orientation
Use the `orientation` prop to change the orientation of the buttons.
::component-code
---
props:
orientation: vertical
slots:
default: |
<UButton color="gray" variant="subtle" label="Submit" />
<UButton color="gray" variant="outline" label="Cancel" />
---
:u-button{color="gray" variant="subtle" label="Submit"}
:u-button{color="gray" variant="outline" label="Cancel"}
::
## Examples
### With input
You can use components like [Input](/components/input), [InputMenu](/components/input-menu), [Select](/components/select) [SelectMenu](/components/select-menu), etc. within a button group.
::component-code
---
slots:
default: |
<UInput color="gray" variant="outline" placeholder="Enter token" />
<UButton color="gray" variant="subtle" icon="i-heroicons-clipboard-document" />
---
:u-input{color="gray" variant="outline" placeholder="Enter token"}
:u-button{color="gray" variant="subtle" icon="i-heroicons-clipboard-document"}
::
### With tooltip
You can use a tooltip within a button group.
:component-example{name="button-group-tooltip-example"}
### With dropdown
You can use a dropdown menu within a button group.
:component-example{name="button-group-dropdown-example"}
## API
### Props