Om komponenten
Varianter
TagTagTagTagTagTagTag
<span class="pkt-tag">Tag</span>
<span class="pkt-tag pkt-tag--red">Tag</span>
<span class="pkt-tag pkt-tag--yellow">Tag</span>
<span class="pkt-tag pkt-tag--green">Tag</span>
<span class="pkt-tag pkt-tag--beige">Tag</span>
<span class="pkt-tag pkt-tag--grey">Tag</span>
<span class="pkt-tag pkt-tag--blue-light">Tag</span><pkt-tag>Tag</pkt-tag>
<pkt-tag skin="red">Tag</pkt-tag>
<pkt-tag skin="yellow">Tag</pkt-tag>
<pkt-tag skin="green">Tag</pkt-tag>
<pkt-tag skin="beige">Tag</pkt-tag>
<pkt-tag skin="grey">Tag</pkt-tag>
<pkt-tag skin="blue-light">Tag</pkt-tag><PktTag>Tag</PktTag>
<PktTag skin="red">Tag</PktTag>
<PktTag skin="yellow">Tag</PktTag>
<PktTag skin="green">Tag</PktTag>
<PktTag skin="beige">Tag</PktTag>
<PktTag skin="grey">Tag</PktTag>
<PktTag skin="blue-light">Tag</PktTag>
Tag med ikon og button
Small
Medium
Large
<span class="pkt-tag pkt-tag--medium">
<svg class="pkt-tag__icon" viewBox="0 0 32 32">
<use href="#user"></use>
</svg>
Tag
</span>
<button
class="pkt-tag pkt-tag--grey
pkt-btn pkt-btn--tertiary
pkt-btn--icons-right-and-left"
>
<svg class="pkt-tag__icon" viewBox="0 0 32 32">
<use href="#user"></use>
</svg>
Tag
<svg class="pkt-tag__close-btn" viewBox="0 0 32 32">
<use href="#close"></use>
</svg>
</button><pkt-tag size="medium" iconName="user" closeTag>Tag</pkt-tag><PktTag size="medium" iconName="user" closeTag>
Tag
</PktTag>CSS oversikt
Block:
- .pkt-tag
Elements:
- .pkt-tag__icon
- .pkt-tag__close-btn
Modifiers:
- .pkt-tag
--red - .pkt-tag
--yellow - .pkt-tag
--green - .pkt-tag
--beige - .pkt-tag
--grey - .pkt-tag
--blue-light - .pkt-tag
--small - .pkt-tag
--medium - .pkt-tag
--large - .pkt-tag
--thin-text - .pkt-tag
--hover
Props, slots og events
| Props | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| skin | string | blue, green, red, beige, yellow, grey, blue-light | blue | Fargevariant for komponenten |
| textStyle | string | normal-text, thin-text | normal | Tekstvariant |
| closeTag | boolean | false | Sett til true hvis du vil ha knapp med lukkeikon | |
| iconName | string | Navn på ikonet i komponenten | ||
| type | string | button, submit, reset | button | HTML-knappetype |
| ariaLabel | string | close | Aria-label for knappen | |
| ButtonHTMLAttributes (React) | string | HTML attributter for knapp | ||
| className (React) | string |
| Slots | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| default | Tekstinnholdet i komponenten | |||
| children(React) | string | Tekstinnholdet i komponenten |
| Events | Type | Validation | Default | Beskrivelse |
|---|---|---|---|---|
| on-close | boolean | Lukker tag | Utløses når lukkeknappen blir klikket | |
| onClick(React) | function | Lukker tag | Klikkhandlingen for komponenten |