HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta
Käyttö ilman Reactia.
Esikatselu
<span class="kds-chip kds-chip--primary kds-chip--solid">
<span class="kds-chip__label">Lorem ipsum</span>
<button aria-label="Poista valinta" class="kds-chip__delete" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-icon kds-icon--size-relative"
role="img"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-miterlimit="10"
stroke-width="2"
d="M4 20 20 4m0 16L4 4"
></path>
<path fill="none" d="M0 0h24v24H0z"></path>
</svg>
</button>
</span>
Esimerkit
Ulkoasuvaihtoehdot
<div>
<span class="kds-chip kds-chip--primary kds-chip--solid kds-mr-2">
<span class="kds-chip__label">Chip (primary)</span>
<button aria-label="Poista valinta" class="kds-chip__delete" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-icon kds-icon--size-relative"
role="img"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-miterlimit="10"
stroke-width="2"
d="M4 20 20 4m0 16L4 4"
></path>
<path fill="none" d="M0 0h24v24H0z"></path>
</svg>
</button>
</span>
<span class="kds-chip kds-chip--primary kds-chip--outline kds-mr-2">
<span class="kds-chip__label">Chip (primary, outline)</span>
<button aria-label="Poista valinta" class="kds-chip__delete" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-icon kds-icon--size-relative"
role="img"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-miterlimit="10"
stroke-width="2"
d="M4 20 20 4m0 16L4 4"
></path>
<path fill="none" d="M0 0h24v24H0z"></path>
</svg>
</button>
</span>
<span class="kds-chip kds-chip--primary-subtle">
<span class="kds-chip__label">Chip (primary-subtle)</span>
<button aria-label="Poista valinta" class="kds-chip__delete" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-icon kds-icon--size-relative"
role="img"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-miterlimit="10"
stroke-width="2"
d="M4 20 20 4m0 16L4 4"
></path>
<path fill="none" d="M0 0h24v24H0z"></path>
</svg>
</button>
</span>
</div>
Valittu ja ei-valittu tila
<div>
<button aria-pressed="false" class="kds-mr-2 kds-chip kds-chip--primary-subtle kds-chip--solid" type="button">
Valittava Chip (ei valittu)
</button>
<button
aria-pressed="true"
class="kds-mr-2 kds-chip kds-chip--primary-subtle kds-chip--solid kds-chip--active"
type="button"
>
Valittava Chip (valittu)
</button>
</div>
CSS-luokat