Components
Button Group
Buttons fused into one control: the group owns only the joinery, so members keep every variant they were given — a solid action can sit beside an outline one and the seam still reads. Selection belongs to the toggle group; this is layout alone.
#Basic usage
<script setup lang="ts">
import { Button, ButtonGroup } from "@bysages/vue";
</script>
<template>
<div class="flex gap-6 items-center flex-wrap">
<ButtonGroup size="sm">
<Button>Left</Button>
<Button>Center</Button>
<Button>Right</Button>
</ButtonGroup>
<ButtonGroup>
<Button>Left</Button>
<Button>Center</Button>
<Button>Right</Button>
</ButtonGroup>
<ButtonGroup size="lg">
<Button>Left</Button>
<Button>Center</Button>
<Button>Right</Button>
</ButtonGroup>
</div>
</template>
<script setup lang="ts">
import { Button, ButtonGroup } from "@bysages/vue";
</script>
<template>
<ButtonGroup orientation="vertical" class="max-w-48">
<Button variant="outline">Align left</Button>
<Button variant="outline">Align center</Button>
<Button variant="outline">Align right</Button>
</ButtonGroup>
</template>
<script setup lang="ts">
import { chevron_down, chevron_up } from "@bysages/icons";
import { Button, ButtonGroup, Icon } from "@bysages/vue";
</script>
<template>
<ButtonGroup>
<Button variant="outline">Layers</Button>
<Button variant="outline" square aria-label="Move up">
<Icon :glyph="chevron_up" />
</Button>
<Button variant="outline" square aria-label="Move down">
<Icon :glyph="chevron_down" />
</Button>
</ButtonGroup>
</template>
#Props
#ButtonGroup
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | String as PropType<"horizontal" | "vertical"> | "horizontal" | The seam runs across the group (default) or down it. |
size | String as PropType<"sm" | "md" | "lg"> | undefined | One register for every member: falls onto data-size for the stylesheet to retune the buttons' heights. |
radius | String as PropType<"sm" | "md" | "lg" | "xl" | "2xl" | "full"> | undefined | The members' corner register: retunes --bs-radius-control for the whole fused shape — edges and trimmed seams keep one story. |