MetricValue

KPI の数値。単位は MetricUnit で。

KPI の数値を大きく見せるための、字送りを詰めた表示です。単位や補助的な文字は MetricUnit で添えます。

export const client = "only";

import { MetricValue, MetricUnit } from "@squadbase/vantage/components";

export default function Example() {
  return (
    <div className="flex w-[30rem] flex-col gap-2">
      <MetricValue size="sm">¥120,400</MetricValue>
      <MetricValue>
        ¥1,240,000 <MetricUnit>/ 月</MetricUnit>
      </MetricValue>
      <MetricValue size="lg">128</MetricValue>
      <MetricValue size="xl">
        2.1 <MetricUnit>%</MetricUnit>
      </MetricValue>
    </div>
  );
}

import { MetricValue, MetricUnit, metricValueVariants } from "@squadbase/vantage/components";

PropType

size?"sm" | "md" | "lg" | "xl"

文字サイズ。

Type"sm" | "md" | "lg" | "xl"

Default"md"

className?string

足すクラス。

Typestring

既定で上下に余白（my-4）が付きます。カードの中でぴったり詰めたいときは className="my-0" を渡してください。

<DashboardCardPreset title="売上">
  <MetricValue className="my-0">¥1,240,000</MetricValue>
  <TrendIndicator value={12.4} direction="up" />
</DashboardCardPreset>