Chip

npm install @entur/chip

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

Varianter

Action chip

ActionChip brukes på steder hvor man skal gjøre en handling som ikke krever like mye oppmerksomhet som vanlige knapper gir. Disse oppfører seg som handlingsknapper som skal brukes når handlingen(e) er direkte knyttet/relatert til hovedinnholdet. Det er oftest flere handlinger, f.eks. ‘Endre’, ‘Slett’, ‘Kjøp på nytt’ osv. men i tabeller kan også action chips benyttes alene. Siden Action chips aktiverer en handling, er ingen av dem forhåndsvalgt. Hvis man kun har én action kan man alternativt benytte Tertiærknapp. Action chip kan ikke være inaktiv, hvis innholdet mangler må man allikevel navigere til ønsket side/funksjon, og vise en melding om hvorfor dette ikke er tilgjengelig.

Choice chip

ChoiceChip og ChoiceChipGroup er alternativer for vanlige radioknapper. Disse skal benyttes for å tilby et valg mellom flere ulike opsjoner. De er ofte direkte knyttet til info som vises ovenfor i flaten (f.eks en reiserute i kart eller en billettkategori), og viser også ofte mer info/forklaring knyttet til valgt Choice chip under raden med chips. Funksjonen er samme som i radio buttons, én verdi er forhåndsvalgt og man kan velge én av de andre. Inaktive Choice chips kan kun benyttes hvis man vil vise noe som vanligvis er tilgjengelig, men akkurat nå ikke er det, f.eks. hvis et setevalg er utsolgt. Årsaken til at et valg ikke er tilgjengelig må alltid beskrives på knappen, og inaktivt design skal være godt lesbart og ikke tonet ned.

Tag chip

TagChip benyttes til forhåndsdefinerte valg, f.eks. mellom aktuelle kategorier. De tilbyr tydelig avgrensede alternativer i et kompakt område. De er et godt alternativ toggle-knapper eller checkboxes.

Funksjonelt er dette checkboxer; ingen er valgt by default, og det er mulig å velge flere eller ingen. Nytt design med tom/full check, som tydeligere indikerer at det å trykke på chip’en er et mulig valg er underveis.

Filter chip

FilteChip dukker opp når de aktiveres, og kan deaktiveres med krysset på selve taggen, eller ved å ‘huke vekk’ valget inne i en meny. De kan organiseres i en horisontalt på rekke og rad, tilnyttet flere søkefelter. Samme design benyttes også til å vise valg i dropdown med multiple choice-funksjon. Man kan velge om man vil vise tags utenfor eller inne i søkefeltet/søkefeltene.

Retningslinjer

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

Props

ActionChip

import { ActionChip } from '@entur/chip';

Denne komponenten har ingen props

ChoiceChip

import { ChoiceChip } from '@entur/chip';

Denne komponenten har ingen props

ChoiceChipGroup

import { ChoiceChipGroup } from '@entur/chip';

Denne komponenten har ingen props

TagChip

import { TagChip } from '@entur/chip';

Denne komponenten har ingen props

FilterChip

import { FilterChip } from '@entur/chip';

Denne komponenten har ingen props