Stock Status

A domain-specific indicator for displaying pharmaceutical stock levels.

Overview

StockQuantityStatus is a domain-specific component that displays a color-coded stock level indicator alongside a label. It is used in pharmaceutical inventory management contexts to communicate whether stock is plentiful (sufficient), moderate (normal), or low (insufficient).

This component is specific to pharmaceutical inventory management. Pair it with inventory tables or product detail views to provide an at-a-glance stock level assessment.

Accessibility

The rendered label text ("여유", "보통", "부족") is read by screen readers, providing a text equivalent of the color indicator. Note: prop values are English ("sufficient", "normal", "insufficient") but display labels are Korean.
Color is not the sole indicator — the text label always accompanies the color-coded icon, ensuring accessibility for color-blind users.

Import

import { StockQuantityStatus } from "@cocso-ui/react";

Default

Pass one of the three quantity values to render the corresponding color-coded indicator and label.

여유

보통

부족

import { StockQuantityStatus } from "@cocso-ui/react";

export default function StockQuantityStatusDefault() {
  return (
    <div className="flex flex-wrap items-center gap-4 p-4">
      <StockQuantityStatus quantity="sufficient" />
      <StockQuantityStatus quantity="normal" />
      <StockQuantityStatus quantity="insufficient" />
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`quantity*`	`"normal" \| "sufficient" \| "insufficient"`	-	The stock level status. `"sufficient"` (plenty) renders in blue, `"normal"` (moderate) renders in green, and `"insufficient"` (low) renders in red. The label is displayed alongside a color-coded SVG icon.