Gå til hovedinnhold
KOMPONENTER

Square button

npmv3.2.11

Kvadratiske knapper består av et ikon og et tilhørende label. Knappen kan benyttes for eksempel til; Legg til, Last ned, Last opp osv.

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

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.

Komponenter

SuccessSquareButton

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

SecondarySquareButton

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

TertiarySquareButton

import { TertiarySquareButton } from '@entur/button';
NavnTypeDefault-verdiBeskrivelse
childrenReactNode

Tekst og ikon, ikon og tekst, eller bare ikon

className?string

Ekstra klassenavn

disabled?boolean false

Deaktivering av knappen

loading?boolean false

Om knappen er opptatt, f.eks. med å lagre eller å kjøpe

as?string | React.ElementType

An override of the default HTML tag. Can also be another React component.

ref?any

Alle tre komponentene har samme API, og brukes på samme måte. Se på "standardknapper"-siden for retningslinjer om når du burde bruke Success, Secondary eller Tertiary.

Knappen regner med at du sender inn label-teksten som en ren string, og ikonet som en komponent. Med andre ord på denne måten:

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

Du kan ikke plassere teksten inni en <span /> eller lignende, da komponenten da vil tolke den biten som et ikon. Dette vil med andre ord ikke fungere:

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

Retningslinjer for bruk

Fungerer som handlingsknapper som består av av et ikon. Ikonet skal være selvforklarende for handlingen samt ha en Tooltip med en beskrivende tekst ved hover. Denne knappen skal benyttes i f.eks disse tilfellene; Legge til, laste ned, laste opp osv.

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.

Rediger denne siden på Bitbucket