@sb1/ffe-tags-react

Beskrivelse

Tag-komponenten brukes for merking og kategorisering av innhold.

Installasjon

npm install --save @sb1/ffe-tags-react

Bruk

Full dokumentasjon: https://sparebank1.github.io/designsystem/

Grunnleggende eksempel

import { Tag } from '@sb1/ffe-tags-react';

<Tag variant="info">Info</Tag>
<Tag variant="success">Suksess</Tag>
<Tag variant="warning">Advarsel</Tag>
<Tag variant="critical">Kritisk</Tag>
<Tag variant="neutral">Nøytral</Tag>
<Tag variant="tip">Tips</Tag>

Ulike typer

<Tag type="emphasis" variant="info">Fremhevet</Tag>
<Tag type="subtle" variant="info">Subtil</Tag>

Ulike størrelser

<Tag size="sm">Liten</Tag>
<Tag size="md">Medium</Tag>
<Tag size="lg">Stor</Tag>

Med ikon

import { Tag } from '@sb1/ffe-tags-react';
import { Icon } from '@sb1/ffe-icons-react';

<Tag variant="critical">
    <Icon fileUrl={warningIconUrl} size="sm" />
    Ikke betalt
</Tag>;

Importere CSS

@import '@sb1/ffe-tags/css/tag.css';

TypeScript

import { Tag, type TagProps } from '@sb1/ffe-tags-react';

Utvikling

Fra designsystem-rotmappen:

npm install && npm run build && npm start

Storybook kjører på http://localhost:6006/