Fusion UI

Overview

Status shows the state of an object with a color and a label. With low emphasis only the dot is shown and the label moves into a tooltip.

Online

"use client";

import React from "react";
import {Status} from "@brynlabs/fusion-ui";

export const StatusExample = () => (
  <Status status={"Online"} emphasis={"high"} statusStyle={"success"}></Status>
);

Styles & emphasis

info

Emphasis medium

Emphasis high

success

Emphasis medium

Emphasis high

warn

Emphasis medium

Emphasis high

critical

Emphasis medium

Emphasis high

orange

Emphasis medium

Emphasis high

turquoise

Emphasis medium

Emphasis high

fuchsia

Emphasis medium

Emphasis high

purple

Emphasis medium

Emphasis high

lime

Emphasis medium

Emphasis high

neutral

Emphasis medium

Emphasis high

denim

Emphasis medium

Emphasis high

"use client";

import React from "react";
import {
  Status,
  STATUS_STYLE,
  STATUS_EMPHASIS,
  type StatusStyle,
  type StatusEmphasis,
} from "@brynlabs/fusion-ui";

export const StatusStylesExample = () => (
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      gap: "1rem",
      alignItems: "flex-start",
    }}>
    {STATUS_STYLE.map(statusStyle => (
      <div
        key={statusStyle}
        style={{
          display: "flex",
          gap: "1rem",
          alignItems: "center",
          flexWrap: "wrap",
        }}>
        <div style={{width: "100px"}}>{statusStyle}</div>
        {STATUS_EMPHASIS.map(emphasis => (
          <Status
            key={`${statusStyle}-${emphasis}`}
            status={`Emphasis ${emphasis}`}
            emphasis={emphasis as StatusEmphasis}
            statusStyle={statusStyle as StatusStyle}
          />
        ))}
      </div>
    ))}
  </div>
);