Esikatselu
<ButtonGroup horizontal="sm">
<Button>Lorem</Button>
<Button>Ipsum</Button>
<Button>Dolor</Button>
</ButtonGroup>
Käyttötarkoitus
ButtonGroup-komponentin avulla voit tehdä toisiinsa liittyvistä toimintopainikkeista (Button) toimintoryhmiä. Komponentin tarkoitus on helpottaa toimintoryhmän responsiivista toteutusta ja saada painikkeet asemoitumaan halutulla tavalla eri kokoisilla näytöillä.
Voit asemoida toimintoryhmän painikkeita joko pysty- tai vaakasuuntaan riippuen painikkeiden lukumäärästä ja näytön koosta.
Huomioi, että komponentin käyttö ei takaa kaikissa käyttötilanteissa parasta käyttökokemusta. Komponentin käyttäjän vastuulla on varmistaa, että painikkeet asemoituvat halutulla tavalla erilaisissa käyttötilanteissa. Joissain tilanteissa parempaan lopputulokseen saattaa päästä asemoimalla painikkeet itse. Muista kuitenkin aina noudattaa Button-komponentin ohjeita esimerkiksi painikkeiden järjestykseen ja sijaintiin liittyen.
- Käytä komponenttia useita painikkeita sisältäviin toimintoryhmiin, kun haluat asetella painikkeita responsiivisesti.
- Älä käytä, jos painikkeita on vain yksi.
Saavutettavuus
Komponentti ei ota kantaa saavutettavuuteen. Tarkista esimerkiksi painikkeiden järjestys Button-komponentin ohjeista.
Esimerkit
Mobiilissa painikkeet asemoidaan oletuksena allekkain. Pienellä näytöllä allekkain olevat painikkeet täyttävä niiden käytössä olevan tilan sivusuunnassa. Jos tämä asemointi ei sovi käyttötilanteeseesi, voit ottaa ominaisuuden pois päältä fluid={false}-propilla.
<ButtonGroup>
<Button>Tee uusi sopimus</Button>
<Button appearance="outline">Muokkaa sopimusta</Button>
<Button variant="danger" appearance="outline">
Poista terapeutti
</Button>
</ButtonGroup>
Kun painikkeet mahtuvat olemaan vierekkäin, voit muuttaa asettelun vaakasuuntaiseksi horizontal-propilla. Painikkeita voi asemoida eri breakpointtien mukaan. Esim. horizontal="sm" asettaa painikkeet pienillä näytöillä allekkain ja suuremmilla rinnakkain.
<ButtonGroup horizontal="sm">
<Button>Tee uusi sopimus</Button>
<Button appearance="outline">Muokkaa sopimusta</Button>
<Button variant="danger" appearance="outline">
Poista terapeutti
</Button>
</ButtonGroup>
Painikkeet voi asemoida rinnakkain kaikilla eri kokoisilla näytöillä asettamalla horizontal-propilla.
<ButtonGroup horizontal>
<Button appearance="outline">Toiminto A</Button>
<Button appearance="outline">Toiminto B</Button>
</ButtonGroup>
Jos kuitenkin samalle riville asetetut painikkeet eivät mahdu niille annettuun tilaan, ne rivittyvät automaattisesti seuraavalle riville.
<ButtonGroup horizontal>
<Button appearance="outline">Toiminto 1</Button>
<Button appearance="outline">Toiminto 2</Button>
<Button appearance="outline">Toiminto 3</Button>
<Button appearance="outline">Toiminto 4</Button>
<Button appearance="outline">Toiminto 5</Button>
<Button appearance="outline">Toiminto 6</Button>
<Button appearance="outline">Toiminto 7</Button>
</ButtonGroup>
Painikekoot
<>
<ButtonGroup horizontal="md" size="xs" className="kds-mb-8">
<Button size="sm">Tee uusi sopimus</Button>
<Button size="sm" appearance="outline">
Muokkaa sopimusta
</Button>
<Button size="sm" variant="danger" appearance="outline">
Poista terapeutti
</Button>
</ButtonGroup>
<ButtonGroup horizontal="md" className="kds-mb-8">
<Button>Tee uusi sopimus</Button>
<Button appearance="outline">Muokkaa sopimusta</Button>
<Button variant="danger" appearance="outline">
Poista terapeutti
</Button>
</ButtonGroup>
<ButtonGroup horizontal="md">
<Button size="lg">Tee uusi sopimus</Button>
<Button size="lg" appearance="outline">
Muokkaa sopimusta
</Button>
<Button size="lg" variant="danger" appearance="outline">
Poista terapeutti
</Button>
</ButtonGroup>
</>
Painikeryhmien ryhmittely
<ButtonGroup isToolbar>
<ButtonGroup horizontal>
<Button appearance="outline" iconBefore={<IconCaretLeft />}>
Edellinen
</Button>
<Button iconAfter={<IconCaretRight />}>Seuraava</Button>
</ButtonGroup>
<ButtonGroup horizontal="sm">
<Button appearance="outline">Tallenna keskeneräisenä</Button>
<Button appearance="outline">Lopeta tallentamatta</Button>
</ButtonGroup>
</ButtonGroup>
<ButtonGroup isToolbar size="xs">
<ButtonGroup horizontal size="xs">
<Button size="sm" appearance="outline" iconBefore={<IconCaretLeft />}>
Edellinen
</Button>
<Button size="sm" iconAfter={<IconCaretRight />}>
Seuraava
</Button>
</ButtonGroup>
<ButtonGroup horizontal="sm" size="xs">
<Button size="sm" appearance="outline">
Tallenna keskeneräisenä
</Button>
<Button size="sm" appearance="outline">
Lopeta tallentamatta
</Button>
</ButtonGroup>
</ButtonGroup>