実行中状態。loading prop で aria-busy="true" と disabled が付き、アイコンがスピナーに変わる。配置は loadingPosition prop で選べ、未指定なら左アイコンがあれば左・なければ右へ自動配置。JS で切り替える場合は aria-busy と disabled をセットで付け外しする。

テキストサイズsm に埋め込んだ例

テキストサイズ標準に埋め込んだ例

テキストサイズlg に埋め込んだ例

Chip

Chip 削除あり

Chip リンク

Chip リンクで削除ありの場合divになる

Chip buttonで削除ありの場合divになる

Chip 任意のアイコン

Chip 削除あり任意のアイコン

Chip outline

Chip sm

Chip sm outline

リストdisc
リストdisc

リストcircle
リストcircle

リストdecimal
リストdecimal

リストparen
リストparen

リスト入れ子
- 入れ子.disc
リスト入れ子
1. 入れ子.decimal
リスト入れ子
1. 入れ子.paren

dt: dd
dt: dd（改行あり）
dd
dt: ddにリスト

ddにリスト

常にrow: dd
常にcolumn: dd

アコーディオン

アコーディオンコンテンツ

アコーディオン（デフォルトオープン）

アコーディオンコンテンツ

アコーディオン（排他的）

アコーディオンコンテンツ

アコーディオン（排他的）

アコーディオンコンテンツ

タブ1 コンテンツ

タブ4 コンテンツ

Popover API + CSS Anchor Positioning によるツールチップ

Popover API によるグローバルナビゲーション。クリックのみで開閉（hover展開はしない）。ARIAは開閉（aria-expanded/aria-controls）のみで、中身はただのリンク一覧（role="menu"は使わない）。widthはシンプルなドロップダウンとメガメニューの見た目の違いだけで、開閉の仕組みは共通。

Stack

Grid

余白

--spacing-3xs

--spacing-2xs

--spacing-xs

--spacing-sm

--spacing-md

--spacing-lg

--spacing-xl

--spacing-2xl

--spacing-3xl

--spacing-4xl

--spacing-5xl

contents width

contents width full

contents width wide

contents width

contents width narrow

シャドウ

--shadow-xs

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xl

--shadow-2xl

tailwind

テキストtext-5xl

テキストtext-4xl

テキストtext-3xl

テキストtext-2xl

テキストtext-xl

テキストtext-lg

テキストtext-base

テキストtext-sm

テキストtext-xs

primaryテキストテキストテキストテキストテキストテキスト

attentionテキストテキストテキストテキストテキストテキスト

mutedテキストテキストテキストテキストテキストテキスト

disabledテキストテキストテキストテキストテキストテキスト

省略テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

画像

固定幅 + Retina対応

通常の本文内画像などで使用。1.5x / 2x のRetine用画像も生成。

固定幅

通常の本文内画像などで使用。SVGなどRetina対応が不要な場合。

レスポンシブ画像（widths + sizes）

主にヒーローイメージ用途
ビューポート幅と解像度に応じて最適なサイズをブラウザが選択。
srcset="800.avif 800w, 1280.avif 1280w, 1920.avif 1920w, 2560.avif 2560w"
800w:小型〜標準スマホ DPR 2(iPhone SE、小型 Android など)
1280w:現行スマホ標準モデル DPR 2〜3(iPhone 12〜14、Galaxy 標準など)
1920w:iPad、iPhone Pro Max、フル HD デスクトップ(DPR 1)
2560w:Retina ノートPC(MacBook 13"〜16")、QHD モニタ

アートディレクション（独自 PictureImage）

PCとSPで別画像を使い分け（src / spSrc）。SPは767px以下で適用。
固定幅 600px + densities 1.5x / 2x で Retina 対応。

複数フォーマット切替（Picture + formats）

AVIF → WebP → 元フォーマットの順でブラウザが対応形式を自動選択。