HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta
Käyttö ilman Reactia.
Esikatselu
<div>
<span class="kds-mr-2 kds-chip kds-chip--primary">
<span class="kds-chip__label">Primary</span>
<button aria-label="Remove primary variant" 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--outline">
<span class="kds-chip__label">Outline</span>
<button aria-label="Remove outline variant" 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>
CSS-luokat