Grupa przycisków

Przyciski grupuje się, opakowując je w buttonGroup(). Muszą być bezpośrednimi dziećmi: grupa zaokrągla pierwszy i ostatni przycisk, a resztę ściąga do siebie, więc cokolwiek pomiędzy rozbija spoinę.

Podstawowa grupa

buttonGroup({ label: 'Podstawowa grupa przycisków' },
  button('Jeden'),
  button('Dwa'),
  button('Trzy'),
)

Warianty

Sama grupa nie niesie koloru. Ustaw variant i color na przyciskach i trzymaj je w grupie jednakowe — to właśnie sprawia, że czyta się ją jako jedną kontrolkę.

stack({ gap: 'md', align: 'flex-start' },
  buttonGroup({ label: 'Solid' },
    button({ variant: 'solid' }, 'Jeden'),
    button({ variant: 'solid' }, 'Dwa'),
    button({ variant: 'solid' }, 'Trzy'),
  ),
  buttonGroup({ label: 'Outline' },
    button({ variant: 'outline', color: 'neutral' }, 'Jeden'),
    button({ variant: 'outline', color: 'neutral' }, 'Dwa'),
    button({ variant: 'outline', color: 'neutral' }, 'Trzy'),
  ),
  buttonGroup({ label: 'Soft' },
    button({ variant: 'soft' }, 'Jeden'),
    button({ variant: 'soft' }, 'Dwa'),
    button({ variant: 'soft' }, 'Trzy'),
  ),
)

Rozmiary i kolory

stack({ gap: 'md', align: 'flex-start' },
  buttonGroup({ label: 'Małe' },
    button({ size: 'sm', variant: 'outline', color: 'neutral' }, 'Lewo'),
    button({ size: 'sm', variant: 'outline', color: 'neutral' }, 'Środek'),
    button({ size: 'sm', variant: 'outline', color: 'neutral' }, 'Prawo'),
  ),
  buttonGroup({ label: 'Duże' },
    button({ size: 'lg', variant: 'soft', color: 'danger' }, 'Anuluj'),
    button({ size: 'lg', variant: 'soft', color: 'danger' }, 'Odrzuć'),
  ),
)

Odnośniki

Przyciski z href grupują się dokładnie tak samo — na rząd rzeczy, z których każda gdzieś prowadzi, a żadna nie jest tą, na której właśnie jesteś.

RSSJSONMapa witryny
buttonGroup({ label: 'Udostępnij' },
  button({ href: '#rss', variant: 'outline', color: 'neutral' }, 'RSS'),
  button({ href: '#json', variant: 'outline', color: 'neutral' }, 'JSON'),
  button({ href: '#sitemap', variant: 'outline', color: 'neutral' }, 'Mapa witryny'),
)

Grupa przycisków czy grupa przełączników?

Grupa przycisków to kontener: łączy to, co do niej włożysz, i nie trzyma żadnego stanu. Jeśli jeden z elementów jest wybrany — kontrolka segmentowa, filtr, sekcja, w której właśnie jesteś — to grupa przełączników, która buduje elementy z danych i sama oznacza aktywny.

Zasada kciuka: jeśli naciśnięcie jednego czyni pozostałe nieaktualnymi, to grupa przełączników. Jeśli każdy robi swoje, osobne — to grupa przycisków.

buttonGroup — trzy osobne akcje
toggleGroup — jeden wybór z trzech
stack({ gap: 'lg' },
  stack({ gap: 'xs' },
    text({ variant: 'caption', tone: 'muted' }, 'buttonGroup — trzy osobne akcje'),
    buttonGroup({ label: 'Akcje wiersza' },
      button({ variant: 'outline', color: 'neutral' }, 'Edytuj'),
      button({ variant: 'outline', color: 'neutral' }, 'Duplikuj'),
      button({ variant: 'outline', color: 'neutral' }, 'Usuń'),
    ),
  ),
  stack({ gap: 'xs' },
    text({ variant: 'caption', tone: 'muted' }, 'toggleGroup — jeden wybór z trzech'),
    toggleGroup({
      label: 'Wyrównanie tekstu',
      value: 'Do środka',
      items: ['Do lewej', 'Do środka', 'Do prawej'],
    }),
  ),
)

Z przyciskiem-ikoną

buttonGroup({ label: 'Akcje edytora' },
  button({ variant: 'outline', color: 'neutral' }, 'Zapisz'),
  iconButton({
    label: 'Więcej akcji',
    variant: 'outline',
    color: 'neutral',
    icon: icon('more-horizontal'),
  }),
)

Propsy

PropTypDomyślnieOpis
labelstring—Dostępna nazwa grupy; staje się aria-label na role="group".

Cała reszta przechodzi na opakowanie. Przyciski w środku biorą własne propsy — zobacz button().