Notification Badgeバッジ

未読の通知や新着情報をユーザーに知らせるためのコンポーネントです。

更新 2024/11/1

サイズ

SmallとMediumの2種類のサイズがあります。

Medium

Small

import { NotificationBadge } from "@serendie/ui";
import { HBox, VBox } from "src/components/LayoutUtils";

export function SizeSample() {
  return (
    <HBox>
      <VBox>
        <VBox position="relative" h="24px" w="24px">
          <NotificationBadge count={1} />
        </VBox>
        <p>Medium</p>
      </VBox>

      <VBox>
        <VBox position="relative" h="16px" w="16px">
          <NotificationBadge size="small" count={1} />
        </VBox>
        <p>Small</p>
      </VBox>
    </HBox>
  );
}

カラー

PrimaryとSecondaryの2種類のカラーがあります。Secondaryはテーマカラーに準じます。

Primary

Secondary

import { NotificationBadge } from "@serendie/ui";
import { HBox, VBox } from "src/components/LayoutUtils";

export function VariantSample() {
  return (
    <HBox>
      <VBox>
        <VBox position="relative" h="24px" w="24px">
          <NotificationBadge count={1} variant={"primary"} />
        </VBox>
        <p>Primary</p>
      </VBox>

      <VBox>
        <VBox position="relative" h="24px" w="24px">
          <NotificationBadge count={1} variant={"secondary"} />
        </VBox>
        <p>Secondary</p>
      </VBox>
    </HBox>
  );
}

バリエーション

通知数が99以上の場合は省略表示されます。数字を表示せず、通知が存在することだけを示すことも可能です。重要度や表示領域に応じて使い分けてください。

99以下

99+

100以上

数字なし

import { NotificationBadge } from "@serendie/ui";
import { HBox, VBox } from "src/components/LayoutUtils";

export function NoNumberSample() {
  return (
    <HBox>
      <VBox>
        <VBox position="relative" h="24px" w="24px">
          <NotificationBadge count={99} />
        </VBox>
        <p>99以下</p>
      </VBox>

      <VBox>
        <VBox position="relative" h="24px" w="24px">
          <NotificationBadge count={100} />
        </VBox>
        <p>100以上</p>
      </VBox>

      <VBox>
        <VBox position="relative" h="8px" w="8px">
          <NotificationBadge noNumber />
        </VBox>
        <p>数字なし</p>
      </VBox>
    </HBox>
  );
}