Button Group

<div class="flex w-full flex-col gap-4">
  <ButtonGroup selection="single" bind:value={view} size="sm" ariaLabel="Listing view">
    <Button value="list"><ListIcon size={16} />List</Button>
    <Button value="gallery"><GalleryIcon size={16} />Gallery</Button>
    <Button value="map"><MapIcon size={16} />Map</Button>
  </ButtonGroup>

  {#if view === 'list'}
    <div class="flex flex-col gap-2" aria-hidden="true">
      {#each ['row-1', 'row-2', 'row-3'] as row (row)}
        <div class="bg-surface-elevated border-border-subtle h-9 rounded-lg border"></div>
      {/each}
    </div>
  {:else if view === 'gallery'}
    <div class="grid grid-cols-3 gap-2" aria-hidden="true">
      {#each ['tile-1', 'tile-2', 'tile-3', 'tile-4', 'tile-5', 'tile-6'] as tile (tile)}
        <div
          class="bg-surface-elevated border-border-subtle aspect-video rounded-lg border"
        ></div>
      {/each}
    </div>
  {:else if view === 'map'}
    <div
      class="bg-surface-elevated border-border-subtle text-text-tertiary flex h-28 items-center justify-center rounded-lg border"
    >
      <MapPinIcon size={24} />
    </div>
  {:else}
    <p class="text-text-tertiary text-sm">No view selected.</p>
  {/if}
</div>

<ButtonGroup
  selection="multiple"
  bind:value={formats}
  size="sm"
  tier="modify"
  ariaLabel="Text formatting"
>
  <Button value="bold" aria-label="Bold"><BoldIcon size={16} /></Button>
  <Button value="italic" aria-label="Italic"><ItalicIcon size={16} /></Button>
  <Button value="underline" aria-label="Underline"><UnderlineIcon size={16} /></Button>
</ButtonGroup>

<p
  class={[
    'text-text-primary text-sm',
    hasFormat('bold') && 'font-bold',
    hasFormat('italic') && 'italic',
    hasFormat('underline') && 'underline'
  ]}
>
  Bright three-room flat with south-facing balcony, five minutes from the station.
</p>

<ButtonGroup ariaLabel="Zoom">
  <Button aria-label="Zoom out" disabled={zoom <= 25} onclick={() => (zoom -= 25)}>
    <ZoomOutIcon size={16} />
  </Button>
  <Button class="min-w-20 tabular-nums" onclick={() => (zoom = 100)}>{zoom}%</Button>
  <Button aria-label="Zoom in" disabled={zoom >= 200} onclick={() => (zoom += 25)}>
    <ZoomInIcon size={16} />
  </Button>
</ButtonGroup>

<ButtonGroup
  selection="single"
  value="all"
  slotClasses={{ base: 'flex w-full [&>*]:flex-1' }}
  ariaLabel="Filter scope"
>
  <Button value="all">All</Button>
  <Button value="active">Active</Button>
  <Button value="archived">Archived</Button>
</ButtonGroup>

<ButtonGroup
  unstyled
  selection="multiple"
  connected={false}
  size="sm"
  class="flex max-w-sm flex-wrap gap-2"
  ariaLabel="Amenity filters"
>
  <Button value="balcony">Balcony</Button>
  <Button value="garden">Garden</Button>
  <Button value="parking">Parking</Button>
  <Button value="elevator">Elevator</Button>
  <Button value="furnished">Furnished</Button>
  <Button value="pets">Pets allowed</Button>
</ButtonGroup>

<BlocksProvider
  presets={{
    ButtonGroup: {
      floating: {
        slotClasses: {
          base: 'bg-surface-overlay border-border-subtle rounded-full border p-1 shadow-[var(--blocks-shadow-md)]'
        }
      }
    }
  }}
>
  <ButtonGroup
    preset="floating"
    connected={false}
    variant="ghost"
    size="sm"
    selection="single"
    value="standard"
    ariaLabel="Map style"
  >
    <Button value="standard">Standard</Button>
    <Button value="satellite">Satellite</Button>
  </ButtonGroup>
</BlocksProvider>