Toggle groups in different sizes.

<script setup lang="ts">
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
</script>

<template>
  <div class="flex flex-col items-center justify-center gap-4">
    <ToggleGroup type="single" size="sm" default-value="top" variant="outline">
      <ToggleGroupItem value="top">Top</ToggleGroupItem>
      <ToggleGroupItem value="bottom">Bottom</ToggleGroupItem>
    </ToggleGroup>
    <ToggleGroup type="single" default-value="top" variant="outline">
      <ToggleGroupItem value="top">Top</ToggleGroupItem>
      <ToggleGroupItem value="bottom">Bottom</ToggleGroupItem>
    </ToggleGroup>
  </div>
</template>