ボタン
ボタンを使用すると、ユーザーは1回のタップでアクションを実行し、選択できます。
インストール
npx nextui-cli@latest add button
上記のコマンドは、個別のインストール専用です。もし、 @nextui-org/react がグローバルにインストール済みの場合は、このステップをスキップできます。
インポート
NextUI はボタン関連のコンポーネントを 2 つエクスポートします。
- Button: ボタンを表示するためのメインコンポーネント。
- ButtonGroup: ボタンのグループを表示するためのラッパーコンポーネント。
使い方
無効化
サイズ
角丸
色
種類
読み込み中
isLoading プロパティを渡して、ボタン内にSpinnerコンポーネントを表示できます。
spinner プロパティにカスタムコンポーネントを渡すことで、ローディングスピナーをカスタマイズすることもできます。
アイコン付き
Button にアイコンを追加するには、startContent または endContent プロパティを渡します。
アイコンのみ
isIconOnly プロパティと、目的のアイコンをchildrenとして渡すことで、テキストなしでボタンを表示することもできます。
カスタムスタイル
コンポーネントのスロットにカスタム Tailwind CSS クラスを渡すことで、Button コンポーネントをカスタマイズできます。
カスタムクラス名は、Tailwind Mergeライブラリのおかげで、デフォルトのクラスを上書きします。つまり、クラスの競合を心配する必要はありません。
カスタム実装
useButtonフックを使用して、独自のボタンコンポーネントを作成することもできます。
ボタン グループ
グループを無効化
ButtonGroupコンポーネントは、内部のすべてのボタンを無効にするisDisabledプロパティも受け入れます。
グループのユースケース
ButtonGroupコンポーネントの一般的な使用例は、選択された値用のボタンとdropdown用の別のボタンの2つのボタンのグループを表示することです。
詳細については、Dropdownコンポーネントを参照してください。
データ属性
Buttonには、base要素に次の属性があります。
- data-hover：ボタンがホバーされているとき。useHoverに基づく。
- data-focus：ボタンがフォーカスされているとき。useFocusRingに基づく。
- data-focus-visible：キーボードでボタンがフォーカスされているとき。useFocusRingに基づく。
- data-disabled：ボタンが無効になっているとき。
isDisabledプロパティに基づく。 - data-pressed：ボタンが押されているとき。usePressに基づく。
- data-loading：ボタンが読み込み中のとき。
isLoadingプロパティに基づく。
アクセシビリティ
- ボタンには
buttonの役割があります。 - SpaceキーとEnterキーのキーボードイベントをサポートします。
- マウスとタッチイベントの処理、およびプレス状態の管理。
- キーボードフォーカスの管理とクロスブラウザの正規化。
デバイスやインタラクション方法をまたいで適切に動作するボタンを構築する複雑さについては、こちらのブログ記事 を読むことをお勧めします。
API
ボタンのプロパティ
| 属性 | 型 | 説明 | デフォルト |
|---|---|---|---|
| children | ReactNode | ボタンに表示するコンテンツ。 | - |
| variant | solid | bordered | light | flat | faded | shadow | ghost | ボタンの外観スタイル。 | solid |
| color | default | primary | secondary | success | warning | danger | ボタンのカラーテーマ。 | default |
| size | sm | md | lg | ボタンのサイズ。 | md |
| radius | none | sm | md | lg | full | ボタンのボーダー半径。 | - |
| startContent | ReactNode | ボタンの開始コンテンツ。 | - |
| endContent | ReactNode | ボタンの終了コンテンツ。 | - |
| spinner | ReactNode | ローディング時に表示するスピナー。 | - |
| spinnerPlacement | start | end | スピナーの配置。 | start |
| fullWidth | boolean | ボタンが親要素の幅全体を使用するかどうか。 | false |
| isIconOnly | boolean | ボタンの幅と高さが同じであるかどうか。 | false |
| isDisabled | boolean | ボタンが無効になっているかどうか。 | false |
| isLoading | boolean | ボタンがローディング中かどうか。 | false |
| disableRipple | boolean | ボタンを押したときにリップル効果を表示するかどうか。 | false |
| disableAnimation | boolean | ボタンがアニメーションを表示するかどうか。 | false |
ボタンのイベント
| 属性 | 型 | 説明 |
|---|---|---|
| onPress | (e: PressEvent) => void | プレスがターゲット上でリリースされたときに呼び出されるハンドラー。 |
| onPressStart | (e: PressEvent) => void | プレスインタラクションが開始されたときに呼び出されるハンドラー。 |
| onPressEnd | (e: PressEvent) => void | プレスインタラクションが終了したときに呼び出されるハンドラー。ターゲット上またはポインターがターゲットを離れた場合。 |
| onPressChange | (isPressed: boolean) => void | プレス状態が変更されたときに呼び出されるハンドラー。 |
| onPressUp | (e: PressEvent) => void | プレスがターゲット上でリリースされたときに、ターゲット上で開始されたかどうかにかかわらず呼び出されるハンドラー。 |
| onKeyDown | (e: KeyboardEvent) => void | キーが押されたときに呼び出されるハンドラー。 |
| onKeyUp | (e: KeyboardEvent) => void | キーがリリースされたときに呼び出されるハンドラー。 |
| onClick | MouseEventHandler | ネイティブのボタンクリックイベントハンドラー（非推奨）代わりに onPress を使用してください。 |
ボタングループのプロパティ
| 属性 | 型 | 説明 | デフォルト |
|---|---|---|---|
| children | ReactNode | ReactNode[] | 表示するボタン。 | - |
| variant | solid | bordered | light | flat | faded | shadow | ghost | ボタンの外観スタイル。 | solid |
| color | default | primary | secondary | success | warning | danger | ボタンのカラーテーマ。 | default |
| size | sm | md | lg | ボタンのサイズ。 | md |
| radius | none | sm | md | lg | full | ボタンのボーダー半径。 | xl |
| fullWidth | boolean | ボタンが幅全体を使用するかどうか。 | false |
| isDisabled | boolean | ボタンが無効になっているかどうか。 | false |
