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>Farger
<button class="pkt-btn pkt-btn--blue">
<span class="pkt-btn__text">Blue</span>
</button><pkt-button color="blue">Blue</pkt-button><PktButton color="blue">Blue</PktButton>Varianter
<button class="pkt-btn pkt-btn--icon-left">
<span class="pkt-icon pkt-btn__icon">
<svg viewBox="0 0 32 32">
<use href="#user"></use>
</svg>
</span>
<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 - .pkt-btn
--blue - .pkt-btn
--blue-outline - .pkt-btn
--green - .pkt-btn
--green-outline - .pkt-btn
--green-dark - .pkt-btn
--green-dark-outline - .pkt-btn
--beige-light - .pkt-btn
--beige-dark-outline - .pkt-btn
--yellow - .pkt-btn
--yellow-outline - .pkt-btn
--red - .pkt-btn
--red-outline
Props, slots og events
| Props | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| disabled | boolean | false | ||
| size | string | small, medium, large | medium | |
| skin | string | primary, secondary, tertiary | primary | |
| color | string | blue, blue-outline, green, green-outline, green-dark, green-dark-outline, beige-light, beige-dark-outline, yellow, yellow-outline, red, red-outline | ||
| 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 | ||||
| isLoading | boolean | true, false | false | Viser en spinner dersom onLoading er satt til true |
| Events | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| onClick | Event som trigges når man trykker på knapp |