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 | |
| 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 |