HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta
Käyttö ilman Reactia.
Esikatselu
<button class="kds-btn kds-btn--primary kds-btn--solid" type="button">Painike</button>
Esimerkit
Painiketyypit
<div>
<div class="kds-btn-group">
<button class="kds-btn kds-btn--primary kds-btn--solid" type="button">Painike</button>
<button class="kds-btn kds-btn--primary kds-btn--outline" type="button">Painike</button>
<button class="kds-btn kds-btn--primary kds-btn--ghost" type="button">Painike</button>
<button class="kds-btn kds-btn--primary kds-btn--ghost-outline" type="button">Painike</button>
<button class="kds-btn kds-btn--primary kds-btn--link" type="button">Painike</button>
</div>
<div class="kds-btn-group">
<button class="kds-btn kds-btn--danger kds-btn--solid" type="button">Painike</button>
<button class="kds-btn kds-btn--danger kds-btn--outline" type="button">Painike</button>
<button class="kds-btn kds-btn--danger kds-btn--ghost" type="button">Painike</button>
<button class="kds-btn kds-btn--danger kds-btn--ghost-outline" type="button">Painike</button>
<button class="kds-btn kds-btn--danger kds-btn--link" type="button">Painike</button>
</div>
<div class="kds-btn-group">
<button class="kds-btn kds-btn--success kds-btn--solid" type="button">Painike</button>
<button class="kds-btn kds-btn--success kds-btn--outline" type="button">Painike</button>
<button class="kds-btn kds-btn--success kds-btn--ghost" type="button">Painike</button>
<button class="kds-btn kds-btn--success kds-btn--ghost-outline" type="button">Painike</button>
<button class="kds-btn kds-btn--success kds-btn--link" type="button">Painike</button>
</div>
<div class="kds-btn-group">
<button class="kds-btn kds-btn--light kds-btn--solid" type="button">Painike</button>
<button class="kds-btn kds-btn--light kds-btn--outline" type="button">Painike</button>
<button class="kds-btn kds-btn--light kds-btn--ghost" type="button">Painike</button>
<button class="kds-btn kds-btn--light kds-btn--ghost-outline" type="button">Painike</button>
<button class="kds-btn kds-btn--light kds-btn--link" type="button">Painike</button>
</div>
<div class="kds-btn-group">
<button class="kds-btn kds-btn--dark kds-btn--solid" type="button">Painike</button>
<button class="kds-btn kds-btn--dark kds-btn--outline" type="button">Painike</button>
<button class="kds-btn kds-btn--dark kds-btn--ghost" type="button">Painike</button>
<button class="kds-btn kds-btn--dark kds-btn--ghost-outline" type="button">Painike</button>
<button class="kds-btn kds-btn--dark kds-btn--link" type="button">Painike</button>
</div>
</div>
Painikekoot
<div class="kds-btn-group">
<button class="kds-btn kds-btn--solid kds-btn--primary kds-btn--sm" type="button">Painike (sm)</button>
<button class="kds-btn kds-btn--solid kds-btn--primary" type="button">Painike (oletus)</button>
<button class="kds-btn kds-btn--solid kds-btn--primary kds-btn--lg" type="button">Painike (lg)</button>
</div>
Painike linkkinä
<div class="kds-btn-group">
<a class="kds-btn kds-btn--primary kds-btn--solid" href="#">Linkkipainike</a>
<a class="kds-btn kds-btn--primary kds-btn--link" href="#">Linkkipainike</a>
</div>
Täysleveä painike
<button class="kds-btn kds-btn--primary kds-btn--solid kds-btn--block" type="button">Täysleveä painike</button>
Käytöstä poistettu painike
<button class="kds-btn kds-btn--primary kds-btn--solid kds-btn--disabled" type="button" disabled="disabled">
Käytöstä poistettu painike
</button>
Pyöreä painike
<button class="kds-btn kds-btn--primary kds-btn--solid kds-btn--rounded" type="button">Pyöreä painike</button>
Painike kuvakkeella
<button class="kds-btn kds-btn--outline kds-btn--primary kds-btn--icon-before" type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1em"
height="1em"
class="kds-mr-2 kds-icon kds-icon--size-xs"
>
<path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-miterlimit="10"
stroke-width="2"
d="M12 2v20M2 12h20"
></path>
<path fill="none" d="M0 0h24v24H0z"></path></svg
><span>Lisää</span>
</button>
CSS-luokat
|
kds-btn | | Painikkeen perusluokka |
kds-btn--[variant] | primary, danger, success, dark, light | Painikkeen väri |
kds-btn--[appearance] | solid, outline, ghost, ghost-outline, link | Painikkeen ulkoasu |
kds-btn--[size] | sm, md, lg | Painikkeen koko |
kds-btn--rounded | | Pyöreä painike |
kds-btn--block | | Täysleveä painike |