Skin
<button class="pkt-btn pkt-btn--primary pkt-btn--label-only">
<span class="pkt-btn__text">Primary</span>
</button><pkt-button skin="primary" variant="label-only">
Primary
</pkt-button><PktButton skin="primary" variant="label-only">
Primary
</PktButton>Varianter
<button class="pkt-btn pkt-btn--icon-left">
<svg class="pkt-btn__icon"><use href="#user"></use></svg>
<span class="pkt-btn__text">icon-left</span>
</button><pkt-button skin="primary" variant="icon-left" iconName="user">
icon-left
</pkt-button><PktButton skin="primary" variant="icon-left" iconName="user">
icon-left
</PktButton>CSS oversikt
Block:
- .pkt-btn
Elements:
- .pkt-btn__text
- .pkt-btn__icon
Modifiers:
- .pkt-btn
--primary - .pkt-btn
--secondary - .pkt-btn
--tertiary - .pkt-btn
--label-only - .pkt-btn
--icon-left - .pkt-btn
--icon-right - .pkt-btn
--icon-only - .pkt-btn
--icon-right-and-left - .pkt-btn
--small - .pkt-btn
--large
Props, slots og events
| Props | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| disabled | boolean | false | ||
| size | string | small, medium, large | medium | |
| skin | string | primary, secondary, tertiary | primary | |
| type | string | button, submit, reset | button | |
| variant | string | label-only, icon-left,icon-right,icon-only,icons-right-and-left | label-only | |
| iconName | string | Legger til ikon basert på navn | ||
| secondIconName | string | Legger til andre ikon basert på navn |
| Events | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| onClick | Event som trigges når man trykker på knapp |