SquareButton

npm install @entur/button

@import '@entur/button/dist/styles.css';

Bruk

Kvadratiske knapper skal alltid ha ett ikon, og kan ha en label på enten venstre eller høyre side. Du kan også bruke dem uten label, men bør da sende inn en alternativ beskrivelse med aria-label.

For at komponenten skal fungere med label må du sende inn teksten som direkte child før eller etter ikonet. Med andre ord på denne måten:

<SecondarySquareButton>
  <RandomIkon /> En valgfri label-tekst
</SecondarySquareButton>

Størrelser

SquareButton støtter tre størrelser: small, medium (default) og large.

Varianter

Square button

Square button finnes i variantene SuccessSquareButton og SecondarySquareButton. Begge komponentene har samme API, og brukes på samme måte. Les mer om buttons for retningslinjer om når du burde bruke Success eller Secondary.

Retningslinjer

Fungerer som handlingsknapper og inneholder et ikon. Ikonet skal være selvforklarende for handlingen og kan gjerne ha en Tooltip med en beskrivende tekst ved hover. Aller best er det å inkludere en label til knappen, da feiltolkes ikke ikonet. Denne knappen kan benyttes i tilfeller som: Legg til, last ned, last opp osv.

Kvadratiske knapper må ha et ikon og kan ha en label på enten venstre eller høyre side. Du kan også bruke dem uten label, men da må du sende inn en alternativ beskrivelse med aria-label.

Universell utforming

Følg våre generelle råd om knapper og disabled states.

Props

SuccessSquareButton

import { SuccessSquareButton } from '@entur/button';

Denne komponenten har ingen props

SecondarySquareButton

import { SecondarySquareButton } from '@entur/button';

Denne komponenten har ingen props

TertiarySquareButton (deprecated)

import { TertiarySquareButton } from '@entur/button';

Denne komponenten har ingen props