按钮组 Button Group

<script setup lang="ts">
import { Button, ButtonGroup } from "@bysages/vue";
</script>

<template>
  <ButtonGroup>
    <Button variant="solid">Save</Button>
    <Button variant="outline">Save as</Button>
    <Button variant="ghost">Discard</Button>
  </ButtonGroup>
</template>

<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>