Skip to content
fandhe-frontendcore v0.4.3
GitHub

Badge

fandhe-frontend-pre-styled-ui の badge mod が提供するスタイル済み Badge 部品です。

ラベル・カウント等の小さな情報を強調表示する部品です。role/aria-* を持たない最小サブセットのため、意味を伝える必要がある場合は周辺のテキストで補足してください。似た用途の Tag は close_trigger による削除操作を持つ点が異なります。

variant（Solid/Subtle（既定）/Outline/Surface/Plain）・size（Xs〜Xl）・colorPalette（6 値、既定 Accent）の 3 軸を持ちます（イシュー #1555 で参照サイト〔chakra-ui/Radix Themes〕基準へ調整し Surface variant を追加、イシュー #2045 で shadcn/ui と突合し Plain variant を追加）。opt-in の共通 shape 軸（Option<Shape>、既定 None）も持ち、Pill（ステータス表示向け）/Circle（カウント表示向け）の 2 形状を既存の見た目を変えずに追加できます（イシュー #3117/#3119）。badge::link コンストラクタで <a> としても組み立てられます（shadcn/ui link variant 相当、イシュー #2045）。

関連 API: fandhe-frontend-pre-styled-ui API

Demo

ステータス表示向けの小型ラベル。variant と colorPalette、size を組み合わせます。

Variant
SolidSubtleOutlineSurfacePlain
Palette
AccentInfoSuccessWarningDangerNeutral
Size
XsSmMdLgXl
VerifiedBookmark
As link

Features

  • BadgeVariant（Solid/Subtle/Outline/Surface/Plain、crates/pre-styled-ui/src/badge.rs。イシュー #1555 で Surface、#2045 で shadcn/ui ghost 相当の Plain を追加）で塗り方を切り替える
  • colorPalette 軸（badge.rs の BadgeProps）でセマンティック色を選択する
  • Subtle/Outline/Surface は 6 役割 palette の淡色トークンを消費する（badge.rs、イシュー #1555）
  • role/aria-* は付与しない最小サブセット（badge.rs モジュール冒頭）
  • badge::link（イシュー #2045）で <a> として組み立てられる。shadcn/ui link variant / render prop 相当で、[href]/:focus-visible state が badge.rs recipe に発火する
  • 共通 shape 軸（recipe::Shape、BadgeProps.shape: Option<Shape>、既定 None）で opt-in の角丸形状を選べる。Pill（両端半円）/Circle（真円、カウント表示向け）とも新規トークンなしで既存 --fandhe-radius-full を参照する（イシュー #3117/#3119）

Anatomy

root

API Reference

Arguments

NameTypeDefaultDescription
variantBadgeVariantSubtle塗り方（badge.rs の BadgeVariant、#[default] は Subtle。イシュー #1555 で Surface、#2045 で Plain を追加し 5 値）。
sizeSizeMdサイズ（badge.rs の BadgeProps）。
paletteColorPaletteAccentcolorPalette 軸（badge.rs の BadgeProps）。
shapeOption<Shape>None共通 shape 軸（badge.rs の BadgeProps）。None は既存の角丸（--fandhe-radius-sm）のまま変えない。opt-in で Some(Shape::Pill)/Some(Shape::Circle) を指定できる（イシュー #3117/#3119）。

Examples

Solid

Solid variant の Badge です。

New

With icon

アイコンを子ノードとして並べた Badge です（イシュー #2045）。

Verified

badge::link で <a> として組み立てた Badge です（イシュー #2045）。

As link

Pill

shape: Some(Shape::Pill) でステータス表示向けの pill 形状にした Badge です（イシュー #3117/#3119）。

Active

Circle（カウント）

shape: Some(Shape::Circle) でカウント表示向けの真円にした Badge です。1〜2 桁の数字でも min-width/aspect-ratio により真円を保ちます。数字だけでは意味が伝わらないため、周辺テキストや呼び出し側の aria-label で補足してください（イシュー #3117/#3119）。

8

Accessibility

WAI-ARIA

AttributeDescription
(該当なし)chakra-ui v3 準拠の最小サブセットとして role/aria-* を付与しない（badge.rs モジュール冒頭）。