Serendie Design System

AboutGet StartedFoundationsComponents
© Mitsubishi Electric Corporation

Badgeバッジ

ステータス、カテゴリなどを表すコンポーネントです。情報を簡潔に表示し、ユーザーの注意を引きつけます。

更新 2024/11/1

サイズ

サイズはSmall, Medium, Largeの3種類があります。

Label

Small

Label

Medium

Label

Large

カラー

例外的にリファレンストークンを参照する形でカラーバリエーションを用意しています。

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

バリエーション

BadgeCloseButtonを渡すことで、絞り込みUIなどでChipとして使用できます。

Label

Small

Label

Medium

Label

Large