Tag | Punkt | Origo - Oslo kommune

Om komponenten

Varianter

TagTagTagTagTagTagTagTag

<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--gray">Tag</span>
<span class="pkt-tag pkt-tag--blue-light">Tag</span>
<span class="pkt-tag pkt-tag--thin-text">Tag</span>

<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="gray">Tag</PktTag>
<PktTag skin="blue-light">Tag</PktTag>
<PktTag textStyle="thin-text">Tag</PktTag>

<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="gray">Tag</PktTag>
<PktTag skin="blue-light">Tag</PktTag>
<PktTag textStyle="thin-text">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--gray 
  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>

<PktTag size="medium" iconName="user" closeTag>
  Tag
</PktTag>

<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--gray
.pkt-tag--blue-light
.pkt-tag--small
.pkt-tag--medium
.pkt-tag--large
.pkt-tag--normal-text
.pkt-tag--thin-text
.pkt-tag--hover

Props, slots og events

Props	Type	Validation	Default	Beskrivelse
skin	string	blue, green, red, beige, yellow, gray, 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