Tag

Tags er små informasjonsbobler som kan brukes til å presentere en eller flere biter med informasjon tilknyttet et hovedtema.

Eksempler Bruk Design Kode

Kom i gang

Installer

npm i @fremtind/jkl-tag-react

Bruk

import { Tag } from "@fremtind/jkl-tag-react";

// Importer stilark via JavaScript med CSS-loader.
import "@fremtind/jkl-tag/tag.min.css";

// Lukkbar Tag bruker IconButton internt, så du må også laste inn stilarket derfra.
import "@fremtind/jkl-icon-button/icon-button.min.css";

// Eller importer stilark via SCSS.
@use "@fremtind/jkl-tag/tag";
@use "@fremtind/jkl-icon-button/icon-button";

React

Versjon
Dokumentasjon: Readme; Changelog

Live demo

Tag

const [dismissed, setDismissed] = React.useState(false);

const dismissAction = false
  ? {
      onClick: () => {
        setDismissed(true);
        setTimeout(() => setDismissed(false), 2600);
      },
      label: "Fjern filter",
    }
  : undefined;

if (dismissed) {
  return null;
}

const components = {
  Tag: Tag,
  InfoTag: InfoTag,
  SuccessTag: SuccessTag,
  WarningTag: WarningTag,
  ErrorTag: ErrorTag,
};
const Component = components['Tag'];

return (
  <Component dismissAction={dismissAction}>Tag</Component>
);

React API

Her finner du en oversikt over props på komponentene i pakken.