@sikt/sds-badge

@sikt/sds-badge

Consume

npm i -s @sikt/sds-badge

React

import { Badge } from "@sikt/sds-badge";
import "@sikt/sds-badge/dist/index.css";

<Badge>Hello, World!</Badge>;

The badge can be marked as active by using the active-prop, altering its appearance:

<Badge active>I am Active!</Badge>

Icons can be added to the badge by passing an sds-icon with the icon-prop.

import { Badge } from "@sikt/sds-badge";
import { InfoIcon } from "@sikt/sds-icons";
import "@sikt/sds-badge/dist/index.css";
import "@sikt/sds-icon/dist/index.css";

<Badge icon={<InfoIcon />}>Information</Badge>;

Stylesheets & custom markup

Import stylesheet:

@import url("@sikt/sds-badge");

Create custom markup:

<span class="sds-badge"> Hello, World! </span>