Badgeバッジ
ステータス、カテゴリなどを表すコンポーネントです。情報を簡潔に表示し、ユーザーの注意を引きつけます。
更新 2024/11/1
サイズ
サイズはSmall, Medium, Largeの3種類があります。
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>
);
}
カラー
例外的にリファレンストークンを参照する形でカラーバリエーションを用意しています。
- 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>
);
}
バリエーション
BadgeCloseButtonを渡すことで、絞り込みUIなどでChipとして使用できます。
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>
);
}