Bifrost Design System

import Bifrost from "@intility/bifrost-react/Bifrost";

Bifrost

Props

Locale

Bifrost ships with English enUS (default), Norwegian nbNO, and Swedish svSE locales. To set current language, pass it to the locale prop.

TSX

import Bifrost from "@intility/bifrost-react/Bifrost";
import nbNO from "@intility/bifrost-react/locales/nb-no";
import enUS from "@intility/bifrost-react/locales/en-us";
import svSE from "@intility/bifrost-react/locales/sv-se";

function MyApp() {
  return (
    <Bifrost locale={nbNO}>
      Du vil få norsk tekst på Bifrost komponenter så lenge de brukes her inne
    </Bifrost>
  );
}

Theme

Removed in 5.0 (Deprecated since 4.0)

Use CSS classes instead

Instead of using this component to apply a color mode, we recommend you apply the .bf-lightmode and .bf-darkmode CSS class names to the document root.

Also see /react/examples/colorModePicker

Color mode picker example code

Sandbox

Open Sandbox

import { useState } from "react";
import Bifrost from "@intility/bifrost-react/Bifrost";
import Button from "@intility/bifrost-react/Button";
import BackButton from "@intility/bifrost-react/BackButton";
import FormatRelativeTime from "@intility/bifrost-react/FormatRelativeTime";
import enUS from "@intility/bifrost-react/locales/en-us";
import nbNO from "@intility/bifrost-react/locales/nb-no";
import svSE from "@intility/bifrost-react/locales/sv-se";

export default function BifrostDemo() {
  const [locale, setLocale] = useState(enUS);

  return (
    <>
      <Button.Group style={{ marginBottom: 40 }}>
        <Button active={locale === enUS} onClick={() => setLocale(enUS)}>
          enUS
        </Button>
        <Button active={locale === nbNO} onClick={() => setLocale(nbNO)}>
          nbNO
        </Button>
        <Button active={locale === svSE} onClick={() => setLocale(svSE)}>
          svSE
        </Button>
      </Button.Group>

      <Bifrost locale={locale}>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <BackButton />
          <FormatRelativeTime date={new Date(Date.now() - 5 * 60 * 1000)} />
        </div>
      </Bifrost>
    </>
  );
}