SplitButton
Jaettu painike samankaltaisten toimintojen ryhmittelyyn ja priorisointiin.
Julkaistu versiossa 4.0.0
Esikatselu
Käyttötarkoitus
SplitButton eli jaettu painike ryhmittelee yhteen samankaltaisia toimintoja. Jaetun painikkeen käyttäminen edellyttää, että toiminnoista yksi on selkeästi yleisin ja muut harvinaisempia. Yleisin toiminto esitetään painikkeena. Muut vaihtoehtoiset toiminnot löytyvät painikkeen vieressä olevasta pudotusvalikosta.
Jaettu painike sopii käytettäväksi tilanteissa, joissa on useita toisiinsa liittyviä toimintoja, mutta joiden esittäminen yksittäisinä painikkeena tekisi käyttöliittymästä asiakkaalle vaikeaselkoisen ja kuormittavan.
Jaettu painike tuo selkeästi esille yleisimmän toiminnon. Pudotusvalikon taakse jäävät toiminnot voivat kuitenkin jäädä asiakkaalta huomaamatta etenkin, jos komponentti ei ole ennestään tuttu. Siksi jaettu painike sopii parhaiten sovelluksiin, joita käytetään usein (esim. sisäiset järjestelmät).
Tee näin
- Käytä jaettua painiketta tilanteissa, joissa on useita samankaltaisia toimintoja, mutta rajoitetusti tilaa niiden esittämiseen.
- Esitä yleisin toiminnallisuus painikkeena.
- Listaa harvemmin tarvittavat toiminnot pudotusvalikkoon.
- Käytä jaettua painiketta samaan tapaan kuin muitakin painikkeita. Tutustu painikkeiden käyttöön Button-komponentin ohjeessa.
Älä tee näin
- Älä käytä jaettua painiketta, jos jokin toiminnoista ei ole selkeästi useimmiten tarvittu oletustoiminto. Käytä tällöin mieluummin perinteistä pudotusvalikkoa tai esitä toiminnot erillisinä painikkeina.
- Älä ryhmittele samaan komponenttiin toimintoja, jotka eivät liity toisiinsa.
- Älä käytä jaettua painiketta, jos kyseessä on asiakkaan harvoin käyttämä sovellus.
- Älä käytä jaettua painiketta navigointiin.
Saavutettavuus
Saavutettavuudessa on noudatettu samoja periaatteita, kuin Button ja Dropdown -komponenttien kohdalla.
Esimerkki
Käytä SplitButton-komponentin painikkeissa aina samaa ulkoasua, jotta ne muodostavat selkeän kokonaisuuden. Ulkoasun voi asettaa helposti molemmille painikkeille antamalla SplitButton:ille variant ja outline -propit. Samoin mahdolliset utility-luokat kannattaa asettaa SplitButton-komponentille. Muut Button-komponentin propit tulee välittää painikkeille erikseen.
Älä tee jaetusta painikkeesta 3. tason painiketta, jolla ei ole reunoja. Jaetun painikkeen tulee näyttää aina selkeästi kahdelta erilliseltä painikkeelta.