Luonnos
Status
Visuaalinen komponentti tilan ja siihen liittyvän lisätiedon esittämiseen.
Julkaistu versiossa 14.0.0
Esikatselu
Käyttötarkoitus
Käytä statusta helpottamaan sisältöjen silmäilyä korostamalla asiakkaan kannalta tärkeimpiä tilatietoja. Status-komponenttiin voit liittää myös tilaan liittyvää lisätietoa.
Status-komponentti mahdollistaa pidemmät tekstit kuin tiiviimpi badge-komponentti. Kokonsa vuoksi Status ei kuitenkaan sovi esim. taulukoiden tai valikoiden sisään tai muuhun pieneen tilaan.
Tee näin
- Valitse tilaa parhaiten kuvaava väri ja käyttöliittymäkuvake.
- Kuvaa tila lyhyesti ja selkeästi.
- Käytä lisätietotekstiä vain, jos siitä on asiakkaalle oikeasti hyötyä.
Älä tee näin
- Älä käytä status-komponenttia ilmoittamaan virheestä tai muusta asiasta, joka vaatii asiakkaalta toimenpiteitä. Käytä tällöin Alert-komponenttia.
- Älä käytä statusta tilanteessa, jossa on käytössä niukasti tilaa. Käytä tällöin pienempää badge-komponenttia.
Saavutettavuus
Status-komponentti ei sisällä mitään erityistä teknistä toteutusta saavutettavuuden huomioimiseksi.
Komponentin ikonille voidaan tarvittaessa välittää sitä kuvaava teksti iconAriaLabel-propilla.
Esimerkit
Tila- ja lisätieto
Nimeä tila mahdollisimman lyhyesti ja selkeästi, jotta asia käy ilmi yhdellä vilkaisulla. Tarkemman tilaa kuvaavan selitteen voi laittaa lisätietotekstiksi. Käytä lisätietoa kuitenkin vain, jos asiakas oikeasti tarvitsee sitä.
Värivaihtoehdot
Komponentilla on tilavärejä mukailevat värivaihtoehdot. Sekä värin että kuvakkeen tulisi ilmentää viestittävää tilaa.
Käytä statuksessa ensisijaisesti käyttöliittymäkuvakkeita.
Komponentin räätälöinti
Otsikon voi antaa title-propin kautta tekstinä tai StatusTitle-komponentilla. Tarvittaessa otsikolle ja ikonille voi välittää omia attribuutteja.