Button

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

Demo

variant（solid / outline / ghost / subtle / surface / plain / link）・size・colorPalette・状態（disabled / loading）の各軸を型安全な props で切り替えます。link variant は背景・輪郭を持たず hover 時のみ下線を表示するリンク風ボタンです（shadcn/ui 突合、イシュー #2009）。IconButton / CloseButton（イシュー #830）は独立部品ではなく本 recipe の icon-only 修飾 variant です。IconButton のアイコン寸法はボタン size から icon_size_for で決定的に写像されます（イシュー #1674）。

Variant

Size

Palette

State

Icon

Icon size

Features

見た目 variant（Solid/Outline/Ghost/Subtle/Surface/Plain/Link、イシュー #1448/#2009）・サイズ（Xs/Sm/Md/Lg/Xl の 5 段、イシュー #1449）・colorPalette の 3 軸を持つ単一 recipe styled 部品。Link variant（shadcn/ui 突合、イシュー #2009）は背景・輪郭を持たず hover 時のみ下線を表示する。
size variant は高さ・水平 padding・font-size をトークン（--fandhe-size-control-*）で固定し、icon_button/close_button（icon-only）は高さ基準の正方形になる（イシュー #1449）。
loading: true のとき disabled と同様に disabled 属性・data-disabled・aria-disabled="true" を付与し、aria-busy="true" を追加する。
loading: true のとき装飾用途の Spinner（role/aria-label を持たない）を子ノード先頭へ自動挿入する。Spinner のサイズはボタンの size へ追随する（Xs/Sm/Md → 小、Lg/Xl → 中、イシュー #1449）。
:focus-visible で palette 連動のフォーカスリングを表示する（イシュー #1449、#1424 準拠）。
button/icon_button/close_button の 3 公開関数が共通の組み立てロジックを共有する（イシュー #830）。
icon_size_for がボタン size からアイコン size を決定的に写像する（Xs/Sm → Sm、Md/Lg/Xl → Md、chakra-ui _icon 準拠）。close_button はこれを内蔵し、icon_button は呼び出し側が同関数で選ぶことを推奨する（イシュー #1674）。
共通 shape 軸（イシュー #3117/#3118）。shape（既定 None、opt-in）で Shape::Pill（両端を最大まで丸める）と Shape::Circle（icon_button/close_button と組み合わせたときのみ真円になる）を選べる。いずれも --fandhe-radius-full を参照し、既定の None は従来どおり角丸のまま class を追加出力しない。

Anatomy

root

API Reference

Arguments

Name	Type	Default	Description
`props`	`&ButtonProps`	—	`variant`（既定 `Solid`）・`size`（既定 `Md`）・`palette`（既定 `Accent`）・`disabled`・`loading`・`shape`（既定 `None`）を束ねる構造体。
`attrs`	`Vec<(&str, &str)>`	—	`<button>` へ合成する追加属性。
`children`	`Vec<Node>`	—	ボタンラベルとなる子ノード。

Data Attributes

Part	Attribute	Observed Values
`root`	`data-disabled`	（値なし）
`root`	`data-loading`	（値なし）

Examples

Button with keyboard shortcut

既存の kbd（イシュー #756/#1063）を子ノードへ併記し、キーボードショートカットを示す用例です。button 自体に kbd との合成専用 API は無く、通常の子ノード（gap 付き flex レイアウトは呼び出し側の CSS に委ねる）として並べるだけで成立します。

Button with badge

既存の badge（イシュー #1063 等）と icon-only の icon_button（イシュー #830）を相対配置し、通知件数を重ねる用例です。位置調整（position: relative/absolute）は本コンポーネント層の責務外のため、呼び出し側の style で行っています。

pill 形状（shape 軸）

ButtonProps { shape: Some(Shape::Pill), .. } で両端を最大まで丸める例です（イシュー #3117/#3118）。2 つ目は Surface variant + ColorPalette::Neutral の組み合わせで、白に近い面・淡いグレー枠・濃い文字という secondary 相当の見た目に近似しています（新しい variant は追加していません）。

circle 形状（icon_button）

icon_button に shape: Some(Shape::Circle) を指定し、icon-only と組み合わせて真円にする例です。真円になるのは icon-only と組み合わせたときだけで、テキストボタンに Circle を指定しても確定サイズの正方形が無いため真円にはなりません。