Badge

ステータスやラベルを表示する小さなバッジ。

インストール

import { Badge } from "@ginga-ui/core";

基本的な使い方

シンプルなバッジの使用例です。

New

export function BasicExample() {
  return <Badge>New</Badge>;
}

バリアント

primary、secondary、info、success、warning、dangerの6種類のバリアントを指定できます。

PrimarySecondaryInfoSuccessWarningDanger

export function VariantsExample() {
  return (
    <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
      <Badge variant="primary">Primary</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="info">Info</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="danger">Danger</Badge>
    </div>
  );
}

テキストと組み合わせる

テキストの横に件数などを表示できます。

通知が届いています3

export function WithTextExample() {
  return (
    <p style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
      通知が届いています
      <Badge variant="danger">3</Badge>
    </p>
  );
}