Esikatselu
<Badge variant="primary">Lorem</Badge>
Käyttötarkoitus
Badge-komponenttia käytetään esittämään visuaalisesti pieniä tietoja, kuten kohteen tila, ilmoitusten määrä tai toimenpiteen suoritus.
Käytä merkkilappua helpottamaan sisältöjen silmäilyä korostamalla tärkeimpiä metatietoja. Komponentin tunnusosa koostuu tyypillisesti lyhestä tekstistä tai numerosta.
- Käytä tilapäivityksen antamisessa tiedosta tai toiminnasta.
- Käytä kun halutaan merkitä tieto huomiota vaativaksi.
- Käytä kun halutaan korostaa, että objekti on äskettäin lisätty.
- Älä käytä komponenttia painikkeina.
Saavutettavuus
Merkkilapussa esitetty tieto ei välttämättä ole yhtä selkeä ruudunlukijaa käyttäville käyttäjille.
Tällöin voidaan merkkilapun sisältö piilottaa ruudunlukijalta asettamalla komponentille attribuutti aria-hidden="true".
Merkkilapun piilotettu tieto voidaan näyttää esimerkiksi erillisessä ruudunlukijalle suunnatussa elementissä, jolloin se on saavutettavissa ja ymmärrettävissä ruudunlukijaa käyttäville.
<Button appearance="outline">
Viestit
<Badge className="kds-ml-2" variant="primary">
<span aria-hidden="true">3 kpl</span>
<span className="kds-sr-only">Sinulla on lukemattomia viestejä 3 kappaletta.</span>
</Badge>
</Button>
Esimerkit
<>
<Badge variant="primary" className="kds-m-2">
Primary
</Badge>
<Badge variant="success" className="kds-m-2">
Positiivinen
</Badge>
<Badge variant="warning" className="kds-m-2">
Warning
</Badge>
<Badge variant="danger" className="kds-m-2">
Kriittinen
</Badge>
<Badge variant="light" className="kds-m-2">
Neutraali
</Badge>
<Badge variant="dark" className="kds-m-2">
Neutraali
</Badge>
</>
<>
<Badge variant="primary" className="kds-m-2" aria-label="neutraali" />
<Badge variant="success" className="kds-m-2" aria-label="positiivinen" />
<Badge variant="warning" className="kds-m-2" aria-label="varoittava" />
<Badge variant="danger" className="kds-m-2" aria-label="kriittinen" />
<Badge variant="dark" className="kds-m-2" aria-label="neutraali" />
<Badge variant="light" className="kds-m-2" aria-label="neutraali" />
</>
<Button appearance="outline">
Viestit
<Badge className="kds-ml-2" variant="primary">
3 kpl
</Badge>
</Button>
<Table caption="Lapsen syntymäaika 13.12.2011">
<TableHead>
<TableHeadRow>
<TableHeader>Aikaväli</TableHeader>
<TableHeader>Päätös</TableHeader>
</TableHeadRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>1.12.2018 - 30.4.2019</TableCell>
<TableCell>
<Badge variant="danger">Hylätty</Badge>
</TableCell>
</TableRow>
<TableRow>
<TableCell>1.6.2019 - 30.6.2019</TableCell>
<TableCell>
<Badge variant="success">Myönnetty</Badge>
</TableCell>
</TableRow>
<TableRow>
<TableCell>1.1.2019 - 31.1.2019</TableCell>
<TableCell>
<Badge variant="warning">Odottaa</Badge>
</TableCell>
</TableRow>
</TableBody>
</Table>