@tabula/ui-status-badge NPM

@tabula/ui-status-badge

Status badges are used for showing a small amount of color categorized metadata about something state.

Installation

Use the package manager pnpm to install @tabula/ui-status-badge.

pnpm add @tabula/ui-status-badge

You can use npm or yarn too.

Usage

You can import UiStatusBadge component and use for your purposes:

import { useState } from 'react';

import { UiStatusBadge, UiStatusBadgeVariant } from '@tabula/ui-status-badge';

import { doAction } from './actions';

export function AwesomeComponent() {
  const [label, setLabel] = useState("Idle");
  const [variant, setVariant] = useState<UiStatusBadgeVariant>("inactive");

  useEffect(() => {
    setLabel("Running");
    setVariant("active");

    doAction()
      .then(() => {
        setLabel("Succeed");
        setVariant("success");
      })
      .catch(() => {
        setLabel("Failed");
        setVariant("error");
      });
  }, []);

  return <UiStatusBadge variant={variant}>{label}</UiStatusBadge>;
}