Chip | Entur Linje

() => {
    const [value, setValue] = React.useState(null);
    return (
      <div
        style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gridGap: '1rem',
        }}
      >
        <div>
          <div className="eds-label">ChoiceChips</div>
          <ChoiceChipGroup
            name="city"
            label="Velg setekategori"
            onChange={e => setValue(e.target.value)}
            value={value}
          >
            <ChoiceChip value="standard">Standard</ChoiceChip>
            <ChoiceChip value="premium">Premium</ChoiceChip>
            <ChoiceChip value="sove" disabled>
              Sove (utsolgt)
            </ChoiceChip>
          </ChoiceChipGroup>
        </div>
        <div>
          <div className="eds-label">ActionChip</div>
          <div style={{ display: 'flex', gap: "1rem" }}>
            <ActionChip>Lagre</ActionChip>
            <ActionChip>
              Legg til <AddIcon aria-hidden />
            </ActionChip>
          </div>
        </div>
        <div>
          <div className="eds-label">TagChip</div>
          <TagChip>Buss</TagChip>
        </div>
        <div>
          <div className="eds-label">FilterChip</div>
          <FilterChip value="mandag">Mandag</FilterChip>
        </div>
      </div>
    );
  }

Bruk Chip når

Bruk Chip når du trenger en kompakt, avrundet knapp for en handling, et valg, en tag eller et filter — se de fire variantene under for hvilken som passer situasjonen din.

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 til hovedinnholdet — oftest flere handlinger, f.eks. ‘Endre’, ‘Slett’, ‘Kjøp på nytt’, men i tabeller kan også action chips brukes alene. Ingen er forhåndsvalgt, siden de aktiverer en handling. Har du kun én action kan du alternativt bruke en tertiærknapp. Action chip kan ikke være inaktiv — mangler innholdet må man likevel navigere til ønsket side/funksjon og vise en melding om hvorfor det ikke er tilgjengelig.

Choice chip

ChoiceChip og ChoiceChipGroup er alternativer for vanlige radioknapper, og skal brukes for å tilby et valg mellom flere ulike opsjoner. De er ofte direkte knyttet til info som vises ovenfor i flaten, og viser ofte mer forklaring knyttet til valgt chip under raden. Én verdi er forhåndsvalgt, og man kan velge én av de andre. Inaktive Choice chips kan kun brukes for å vise noe som vanligvis er tilgjengelig, men akkurat nå ikke er det, f.eks. et utsolgt setevalg. Årsaken til at et valg ikke er tilgjengelig må alltid beskrives på selve knappen, og inaktivt design skal være godt lesbart og ikke tonet ned.

Tag chip

TagChip brukes til forhåndsdefinerte valg, f.eks. mellom aktuelle kategorier. Den tilbyr tydelig avgrensede alternativer i et kompakt område, og er et godt alternativ til toggle-knapper eller checkboxes. Funksjonelt er dette checkbokser: ingen er valgt som standard, og det er mulig å velge flere eller ingen.

Filter chip

FilterChip dukker opp når den aktiveres, og kan deaktiveres med krysset på selve chip-en, eller ved å huke vekk valget inne i en meny. De kan organiseres horisontalt på rekke og rad, tilknyttet flere søkefelter. Samme design brukes også til å vise valg i en dropdown med multiple choice-funksjon. Du kan velge om du vil vise chips utenfor eller inne i søkefeltet.

Størrelser

Alle chips finnes i small, medium (standard) og large, styrt av size-propen. Høyder, padding, ikonstørrelser og typografi kommer fra tokens som følger visningsmodus, så chips-ene skalerer innenfor hver size når data-view-mode er satt på en parent.

Generelle retningslinjer

Følg våre generelle råd om knapper, inkludert rådene om disabled-tilstander.

Eksempler

Størrelser
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
  <ActionChip size="small">Small</ActionChip>
  <ActionChip size="medium">Medium</ActionChip>
  <ActionChip size="large">Large</ActionChip>
</div>