HTML
Lisätietoa HTML-rakenteen ja tyylien hyödyntämisestä löydät sivulta
Käyttö ilman Reactia.
Esikatselu
<div role="group" class="kds-btn-group kds-btn-group--fluid sm:kds-btn-group--horizontal">
<button class="kds-btn kds-btn--solid kds-btn--primary" type="button">Painike</button>
<button class="kds-btn kds-btn--outline kds-btn--primary" type="button">Painike</button>
<button class="kds-btn kds-btn--ghost kds-btn--primary" type="button">Painike</button>
</div>
Esimerkit
Painikkeet allekkain
<div>
<div role="group" class="kds-btn-group kds-btn-group--fluid">
<button class="kds-btn kds-btn--solid kds-btn--primary" type="button">Painike</button>
<button class="kds-btn kds-btn--outline kds-btn--primary" type="button">Painike</button>
<button class="kds-btn kds-btn--ghost kds-btn--primary" type="button">Painike</button>
</div>
</div>
Painikkeet vierekkäin
<div>
<div role="group" class="kds-btn-group kds-btn-group--horizontal">
<button class="kds-btn kds-btn--solid kds-btn--primary" type="button">Painike</button>
<button class="kds-btn kds-btn--outline kds-btn--primary" type="button">Painike</button>
<button class="kds-btn kds-btn--ghost kds-btn--primary" type="button">Painike</button>
</div>
</div>
Painikeryhmän koko
<div>
<div role="group" class="kds-btn-group kds-btn-group--fluid sm:kds-btn-group--horizontal kds-btn-group--sm">
<button class="kds-btn kds-btn--solid kds-btn--primary" type="button">Painike</button>
<button class="kds-btn kds-btn--outline kds-btn--primary" type="button">Painike</button>
<button class="kds-btn kds-btn--ghost kds-btn--primary" type="button">Painike</button>
</div>
<div role="group" class="kds-btn-group kds-btn-group--fluid sm:kds-btn-group--horizontal">
<button class="kds-btn kds-btn--solid kds-btn--primary" type="button">Painike</button>
<button class="kds-btn kds-btn--outline kds-btn--primary" type="button">Painike</button>
<button class="kds-btn kds-btn--ghost kds-btn--primary" type="button">Painike</button>
</div>
<div role="group" class="kds-btn-group kds-btn-group--fluid sm:kds-btn-group--horizontal kds-btn-group--lg">
<button class="kds-btn kds-btn--solid kds-btn--primary" type="button">Painike</button>
<button class="kds-btn kds-btn--outline kds-btn--primary" type="button">Painike</button>
<button class="kds-btn kds-btn--ghost kds-btn--primary" type="button">Painike</button>
</div>
</div>
CSS-luokat
|
kds-btn-group | | Painikeryhmän perusluokka |
kds-btn-group--[size] | sm, md, lg | Painikeryhmän koko |
kds-btn-group--fluid | | Asettaa allekkaiset painikkeet täyslevyisiksi |
kds-btn-group--horizontal | | Asettaa painikkeet rinnakkain |
[horizontal]:kds-btn-group--horizontal | xs,sm, md, lg, xl | Asettaa painikkeet rinnakkain annetusta breakpointista eteenpäin |