コンポーネント
公開 API の全 36 コンポーネントです。 各ページに import 例・使用例・主要 props を掲載しています。 ライブデモがあるコンポーネントはページ内で操作できます。
Actions
Button
M3 のボタン。filled / tonal / outlined / elevated / text の 5 バリアントをサポートし、先頭・末尾アイコンとリップル効果を備えます。
IconButton
アイコンのみのボタン。standard / filled / tonal / outlined とトグル(selected)をサポートします。
ButtonGroup
関連するボタンをグループ化するコンテナ。connected スタイルで隣接ボタンの角丸を調整します。
SplitButton
複合コンポーネント(SplitButton.Root / Group / Leading / Trailing)。主要アクションとドロップダウンメニューを組み合わせた分割ボタン。
Fab
Floating Action Button。primary / secondary / tertiary / surface のサイズとバリアントを提供します。
FabMenu
FAB から展開する Speed Dial メニュー。子アクションを縦に配置します。
SegmentedButton
排他的な選択肢を提示するセグメントボタン。単一選択モードをサポートします。
Selection
Text input
TextField
filled / outlined の M3 テキストフィールド。フローティングラベル、エラー、支援テキストを Field パーツで構成します。
Search
M3 検索バー。leading 検索アイコンとクリアボタンを備えた TextField 派生コンポーネントです。
Select
複合コンポーネント(Select.Root / Trigger / Value / Icon / Portal / Positioner / Popup / Item)。M3 の outlined トリガーとメニュー popup を提供します。
Slider
複合コンポーネント(Slider.Root / Control / Track / Indicator / Thumb)。M3 レールとハンドルのステートレイヤーを提供します。
DatePicker
カレンダーポップアップ付き日付入力。TextField トリガーとカレンダーグリッドを組み合わせます。
TimePicker
時刻入力フィールド。ダイアログまたはポップアップで時・分を選択します。
Navigation
NavigationBar
モバイル向けボトムナビゲーションバー。NavigationBar.Item で目的地を配置します。
NavigationRail
コンパクト/展開可能なサイドレール。NavigationRail.Item で主要目的地を配置します。
NavigationDrawer
モーダル/標準/永続の M3 ナビゲーションドロワー。NavigationDrawer.Item でメニュー項目を構成します。
TopAppBar
画面上部のアプリバー。small / center / medium / large のバリアントを提供します。
BottomAppBar
画面下部のアプリバー。FAB スロットとアクションボタンを配置できます。
Containment
Card
elevated / filled / outlined の M3 カードコンテナ。コンテンツグループ化に使用します。
Dialog
複合コンポーネント(Dialog.Root / Trigger / Portal / Backdrop / Popup / Title / Description / Close)。M3 スクリムとサーフェスダイアログ。
BottomSheet
画面下部からスライドするシート。ドラッグハンドルとスクリムを備えます。
SideSheet
画面端からスライドするサイドシート。modal / standard バリアント。
Menu
複合コンポーネント(Menu.Root / Trigger / Portal / Positioner / Popup / Item / Separator)。M3 メニューサーフェスとリップル付き項目。
Tooltip
複合コンポーネント(Tooltip.Root / Trigger / Portal / Positioner / Popup)。inverse-surface のプレーンツールチップ。
Communication
Badge
small / large の M3 バッジ。数値カウントやドット表示に使用します。
Divider
水平/垂直の M3 ディバイダー。inset バリアントでリスト項目向けの余白付き区切り線。
List
M3 リストコンテナ。List.Item または Item コンポーネントと組み合わせて使用します。
Item
1 行/2 行/3 行の M3 リスト項目。leading / trailing スロットとインタラクティブ状態をサポート。
Snackbar
Snackbar.Provider と useSnackbar によるトースト通知。Viewport 内に Root を描画してメッセージを表示します。
Progress
linear / circular の M3 プログレスインジケーター。determinate / indeterminate をサポート。
LoadingIndicator
M3 Expressive のローディングインジケーター(wave / circular)。