Notification Badge

Notifies users of unread updates or new information.

Last updated 11/1/2024

Size

Two sizes: Small and Medium.

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>
  );
}

Color

Two colors: Primary and Secondary. Secondary follows the theme color.

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>
  );
}

Variants

Counts of 99+ are truncated. You can also show a dot without a number; choose based on importance and space.

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>
  );
}