nve-button

Selveste NVE-knappen. Bruk href for å gjøre den om til en link. Disse feltene skal ikke brukes:caret og pill Circle attributte skal brukes kun når man viser bare et ikon.

Arvet fra SlButton.

Denne komponenten bygger på en Shoelace-komponent. Sjekk også dokumentasjonen i Shoelace for å få full oversikt over hvordan komponenten funker.

Feil / oppgaver / PR

Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-button.

 

<nve-button>NVE-knappen</nve-button>

Eksempler

Varianter

Bruk variant for å velge farge. default er standard. success og warning skal ikke brukes. Vi bruker heller ikke outline-attributt, men neutral-variant

<nve-button variant="primary">primary</nve-button>
<nve-button>default</nve-button>
<nve-button variant="neutral">neutral</nve-button>
<nve-button variant="text">text</nve-button>
<nve-button variant="danger">danger</nve-button>

Størrelse

Bruk size for å endre størrelse. large er standard.

<nve-button size="small">small</nve-button>
<nve-button>medium</nve-button>
<nve-button size="large">large</nve-button>

Disabled

Bruk disabled for å deaktivere knappen.

<nve-button disabled>deaktivert</nve-button> <nve-button>ikke deaktivert</nve-button>

Prefix spor

Bruk prefix spor for å vise noe foran knapp teksten, f.eks et ikon.

<nve-button size="small"><nve-icon slot="prefix" name="warning"></nve-icon>Varsel</nve-button>
<nve-button><nve-icon slot="prefix" name="warning"></nve-icon>Varsel</nve-button>
<nve-button size="large"><nve-icon slot="prefix" name="warning"></nve-icon>Varsel</nve-button>

Suffix spor

Bruk suffix spor for å vise noe etter knapp teksten, f.eks et ikon.

<nve-button><nve-icon slot="suffix" name="thumb_up"></nve-icon>Bra</nve-button>

Loading

Bruk loading for å legge til ei snurre. Klikk for å slå av og på loading

<nve-button loading onclick="this.loading = !this.loading">loading</nve-button>

Kun ikon

Knapper med kun ikon kan brukes ved å sette nve-icon i standardsporet.

<nve-button size="large" variant="primary"><nve-icon name="warning"></nve-icon></nve-button>
<nve-button><nve-icon name="warning"></nve-icon></nve-button>
<nve-button size="small" variant="neutral"><nve-icon name="warning"></nve-icon></nve-button>

Man kan fortsatt bruke loading attributtet for å vise kun spinner.

<nve-button loading size="medium" variant="primary" onclick="this.loading = !this.loading">
  <nve-icon name="warning"></nve-icon>
</nve-button>

Knapper med bare ikon kan også bruke attributtet circle for å vise en rund knapp.

<nve-button circle variant="neutral" size="large"><nve-icon name="more_vert"></nve-button>
<nve-button circle><nve-icon name="more_vert"></nve-button>
<nve-button circle size="small" variant="text"><nve-icon name="more_vert"></nve-icon></nve-button>

Ikon farge

I noen tilfeller må man sette en annen farge på ikonet. Dette kan enkelt gjøres ved å sette --nve-icon-color CSS-egenskapen.

<nve-button size="medium" variant="neutral" style="--nve-icon-color: red"
  ><nve-icon name="warning"></nve-icon
></nve-button>

Egenskaper

Navn	Type	Arvet fra	Beskrivelse	Reflected
size	'small' | 'medium' | 'large' = 'medium'
testId	string | undefined = undefined