Button

ユーザーがアクションを実行するためのインタラクティブな要素。フォーム送信、ダイアログの表示、操作の確認などに使用します。

Basic

jui-button の最も基本的な使用例です。

Brand

Variants

variant プロパティを使用してコンポーネントの視覚的なスタイルを変更します。

Brand

Outline

Ghost

Danger

Sizes

size プロパティを使用してコンポーネントの大きさを変更します。

Small

Medium

Large

States

disabled などのプロパティを使用してコンポーネントの状態（非活性など）を制御します。

Normal

Disabled

Outline Disabled

With Icons

スロットなどを利用して、アイコン付きのパターンを作成できます。

🚀Launch

Next➡️

⚙️Settings

アクセシビリティ

WAI-ARIA:
- 内部でネイティブの <button> 要素（href 属性がある場合は <a> 要素）が生成され、標準的なボタン・リンクのセマンティクスが完全に保証されます。
- loading="true" 状態の時は、aria-busy="true" 属性が自動的に付与され、処理中であることがスクリーンリーダー等の支援技術に伝わります。また、この間は安全のためクリックイベントが抑制されます。
キーボードナビゲーション:
- Tab キーでフォーカスを合わせることができ、Enter または Space キーを押すことでボタンをクリック（実行）できます。
- disabled（または loading="true"）状態の時は、自動的に tabindex="-1" となり、キーボードフォーカスの順序から自動的に除外されます。

CSS カスタムプロパティ

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークン（--jui-color-brand, --jui-color-brand-hover, --jui-radius-sm, --jui-transition-fast 等）を参照してスタイルが適用されます。

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
`color-mix()`	ホバー/アクティブ色生成	111+	113+	16.4+	Baseline 2023
`:focus-visible`	キーボードフォーカスリング	86+	85+	15.4+	Baseline 2022

💡 いずれの機能も Baseline 2022〜2023 に到達しており、主要ブラウザで広く対応済みです。

Baseline 情報

機能	Baseline 達成	Widely Available 予定
`color-mix()`	2023年	2025年後半 ✅
`:focus-visible`	2022年	2024年後半 ✅

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`disabled`	`disabled`	無効状態	`boolean`	`false`
`loading`	`loading`	ローディング状態 — スピナーを表示しクリックを無効化する	`boolean`	`false`
`size`	`size`	ボタンのサイズ	`"lg" \| "md" \| "sm"`	`'md'`
`type`	`type`	ボタンの type 属性	`"button" \| "reset" \| "submit"`	`'button'`
`variant`	`variant`	ボタンのバリアント	`"brand" \| "danger" \| "ghost" \| "outline"`	`'brand'`

イベント

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
`juiClick`	クリック時に発火するイベント（disabled 時は不発火）	`CustomEvent<{ originalEvent: MouseEvent; }>`

スロット

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	ボタンラベル（デフォルトスロット）
`"prefix"`	ラベル前のアイコン等
`"suffix"`	ラベル後のアイコン等

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
`"button"`	ルートの要素
`"label"`	ラベルを囲む span 要素

Built with StencilJS