Badge

Displays status or categories concisely to draw attention.

Last updated 11/1/2024

Size

Available in Small, Medium, and Large.

Label

Small

Label

Medium

Label

Large

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

export function SizeSample() {
  return (
    <HBox>
      <VBox>
        <Badge size="small">Label</Badge>
        <p>Small</p>
      </VBox>
      <VBox>
        <Badge>Label</Badge>
        <p>Medium</p>
      </VBox>
      <VBox>
        <Badge size="large">Label</Badge>
        <p>Large</p>
      </VBox>
    </HBox>
  );
}

Color

Color variations are exceptionally provided by referencing reference tokens.

Gray: Label
Gray-subtle: Label
Blue: Label
Blue-subtle: Label
Green: Label
Green-subtle: Label
Yellow: Label
Yellow-subtle: Label
Chestnut: Label
Chestnut-subtle: Label
Red: Label
Red-subtle: Label

import { Badge } from "@serendie/ui";
import { Dd, Dl, Dt, HBox } from "src/components/LayoutUtils";

export function ColorSample() {
  return (
    <HBox>
      <Dl
        w="100%"
        gridTemplateColumns={{ sm: "max-content auto max-content auto" }}
      >
        <Dt>Gray</Dt>
        <Dd>
          <Badge>Label</Badge>
        </Dd>

        <Dt>Gray-subtle</Dt>
        <Dd>
          <Badge styleColor="gray-subtle">Label</Badge>
        </Dd>

        <Dt>Blue</Dt>
        <Dd>
          <Badge styleColor="blue">Label</Badge>
        </Dd>

        <Dt>Blue-subtle</Dt>
        <Dd>
          <Badge styleColor="blue-subtle">Label</Badge>
        </Dd>

        <Dt>Green</Dt>
        <Dd>
          <Badge styleColor="green">Label</Badge>
        </Dd>

        <Dt>Green-subtle</Dt>
        <Dd>
          <Badge styleColor="green-subtle">Label</Badge>
        </Dd>

        <Dt>Yellow</Dt>
        <Dd>
          <Badge styleColor="yellow">Label</Badge>
        </Dd>

        <Dt>Yellow-subtle</Dt>
        <Dd>
          <Badge styleColor="yellow-subtle">Label</Badge>
        </Dd>

        <Dt>Chestnut</Dt>
        <Dd>
          <Badge styleColor="chestnut">Label</Badge>
        </Dd>

        <Dt>Chestnut-subtle</Dt>
        <Dd>
          <Badge styleColor="chestnut-subtle">Label</Badge>
        </Dd>

        <Dt>Red</Dt>
        <Dd>
          <Badge styleColor="red">Label</Badge>
        </Dd>

        <Dt>Red-subtle</Dt>
        <Dd>
          <Badge styleColor="red-subtle">Label</Badge>
        </Dd>
      </Dl>
    </HBox>
  );
}

Variants

Pass BadgeCloseButton to use it like a chip in filtering UIs.

Label

Small

Label

Medium

Label

Large

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

export function CloseButtonSample() {
  return (
    <HBox>
      <VBox>
        <Badge size="small" closeButton={<BadgeCloseButton />}>
          Label
        </Badge>
        <p>Small</p>
      </VBox>
      <VBox>
        <Badge closeButton={<BadgeCloseButton />}>Label</Badge>
        <p>Medium</p>
      </VBox>
      <VBox>
        <Badge size="large" closeButton={<BadgeCloseButton />}>
          Label
        </Badge>
        <p>Large</p>
      </VBox>
    </HBox>
  );
}