Tag

const Preview = () => {
  return <Tag>New</Tag>;
};

render(<Preview />)

Bruk Tag når

• innhold trenger en kategori, for eksempel «Beta», «Ny» eller «Populær»
• status skal vises, for eksempel «Pågående», «Fullført» eller «Avbrutt»

Unngå Tag når

• du skal lenke til andre sider, bruk heller Link
• det er en handling, bruk heller Button
• brukeren skal filtrere, bruk heller Chip

Eksempel

Ikoner

Du kan bruke ikoner i Tag for å gi ekstra visuell informasjon. Du må selv bestemme mellomrom mellom tekst og ikon. Vi anbefaler at padding på Tag mot ytterste kant er likt margin på ikonet.

const Icons = () => {
  return (
    <Tag
      data-color='neutral'
      data-size='md'
      style={{
        paddingInlineStart: 'var(--ds-size-1)',
      }}
    >
      <RobotIcon aria-hidden style={{ marginInlineEnd: 'var(--ds-size-1)' }} />
      Teksten er KI-generert
    </Tag>
  );
};

render(<Icons />)

Varianter

Tag kommer i to varianer, med og uten outline. Taggen kan være svak på noen bakgrunnsfarger, og da kan du endre variant for å gjøre den mer synlig.

const Variants = () => {
  const colors = [
    'accent',
    'brand1',
    'brand2',
    'brand3',
    'neutral',
    'success',
    'warning',
    'danger',
    'info',
  ] as TagProps['data-color'][];
  return (
    <>
      <div
        style={{
          display: 'flex',
          gap: 'var(--ds-size-2)',
          flexWrap: 'wrap',
        }}
      >
        <Paragraph>Default:</Paragraph>
        {colors.map((color) => (
          <Tag
            key={color}
            data-color={color as TagProps['data-color']}
            variant='default'
          >
            {color}
          </Tag>
        ))}
      </div>
      <br />
      <div
        style={{
          display: 'flex',
          gap: 'var(--ds-size-2)',
          flexWrap: 'wrap',
        }}
      >
        <Paragraph>Outline:</Paragraph>
        {colors.map((color) => (
          <Tag
            key={color}
            data-color={color as TagProps['data-color']}
            variant='outline'
          >
            {color}
          </Tag>
        ))}
      </div>
    </>
  );
};

render(<Variants />)

Retningslinjer

Bruk Tag når du vil hjelpe brukeren med å raskt identifisere innhold basert på kategori, status eller egenskap. Tag fungerer godt for å vise metadata, som for eksempel hvilken type dokument det er, hvilken status noe har, eller hvilket tema det tilhører. De bør brukes konsistent, være korte og lett forståelige, og unngås dersom informasjonen allerede er tydelig i konteksten. Tag er ikke klikkbar, det er bare en merkelapp.

Plassering

Tag bør som regel plasseres bak tittelen eller navnet på tilhørende element. Tags bør ikke plasseres sammen med knapper da det kan forvirre brukeren. Vurder plasseringen og brukertest gjerne.

Tekst

• Bruk korte etiketter for enkel skanning. Helst ett ord. Maks to ord dersom det er nødvendig for å beskrive statusen og skille den fra andre tagger.
• Bruk ord og begreper som er gjenkjennelige for løsningen, unngå ukjente og fremmede ord.
• Vil du bruke flere tags sammen, bør du bruke en <ul> med <li> element, slik at tags blir lest opp som en liste.