---
summary: ユーザーのアクションを受け付けるボタン
category: Actions
---

# Button

ユーザーのアクションを受け付けるためのボタンコンポーネントです。
素の `<button>` の代わりに使います。ページ遷移には LinkButton を使ってください。

## 基本の使い方

```tsx
import { Button } from 'wip-ui'

<Button onPress={handleSave}>保存</Button>
```

## 使う場面

- 保存・登録・送信・削除など、データに変更を加える処理を実行する
- 内容の確定や同意など、ユーザーの意思表示を受け付ける
- キャンセル・中止・解除など、操作を取り消す
- ダイアログを開くなど、データを変えずに UI の表示状態を切り替える

## 使い方

### 色・外観
- [should] 画面の目的を進める主要なアクション（保存、送信など）のボタンは、画面またはダイアログごとに1つにする
- [should] テーブルの行やカードなど、繰り返し出る要素の中のボタンは、主要なボタンより目立たない外観にする
- [should] 主要なアクションと副次のアクションは、外観で区別できるようにする
- 外観の目立つ順番は、フレーバーによらず flat ＞ outlined ＞ transparent
- 主要・副次のボタンにどの appearance と color を使うかは、フレーバーごとに異なる
- [should] エラーや削除など、注意が必要な破壊的なアクションには color="negative" を使う
- [avoid] カードなど、それ自体に輪郭がある要素の上では appearance="outlined" を使わない

### サイズ・幅
- [should] テーブル行内など、スペースが限られる場面では size="s" を使う
- [should] 申し込み・購入やオンボーディングの開始など、その画面で最も促したい行動のボタンには size="l" を使う
- [avoid] 広い画面のフォームで、送信ボタンを幅いっぱいにしない
- [avoid] size="s" のボタンに width="full" を使わない
- [should] 同列に並ぶボタンで、ラベルの文字量の差によって意図しない優先度の差が生まれる場合は幅を揃える

### 配置
- [should] 近くに並べるボタンは、同じ対象を操作するものだけにする
- [should] ダイアログなどでボタンを複数置く場合は横並びにし、主要な（処理を続行する）ボタンを右に置く

### フォーム
- [should] フォームは、送信ボタンを押したときも、入力欄で Enter キーを押したときも送信できるようにする

### 状態
- [should] 条件を満たしていない、または処理中で操作できない場合は isDisabled を使う

### アイコン
- [should] アクションの意味をアイコンで補強する場合は leading にアイコンを置く
- [should] 方向性や遷移先を示す場合は trailing にアイコンを置く
- [should] iconOnly は、保存・削除など一般的なアイコンで意味が伝わるアクションに限り、スペースが限られる場面で使う
- [avoid] 装飾目的でアイコンを付けない
- [avoid] 同じような機能のボタンが並ぶ場合はアイコンを付けない
- [avoid] キャンセルなど取り消し系のアクションにはアイコンを付けない
- [avoid] 「販売開始」のように一般的なシンボルがないアクションにはアイコンを付けない

## 文言

- [should] ラベルはボタンを押して実行されるアクションを表す
- [should] 「〜する」は省き、行為を表す名詞にする（「確認する」ではなく「確認」、「ログインする」ではなく「ログイン」）
- [should] 取り消し系のアクションには「キャンセル」「中止」「解除」など一般的な語を使う
- [should] 押してもすぐに効果が反映されず、追加の入力や手続きが必要な場合はラベル末尾に「…」を付ける。ただし申し込み・購入など、その画面で最も促したい行動のボタンには付けない
- [avoid] 「押す」「選択する」など、UI 操作そのものに言及するラベルにしない。ただし、閉じる以外の処理をしないボタンは「閉じる」でよい
- [avoid] 「無料新規登録」のように、インセンティブやベネフィットをラベルに含めない。それらはボタンの外側で示す
- [avoid] ラベルを2行にしない

## アクセシビリティ

- [must] iconOnly のときは aria-label などでボタンの名前を付ける

## 実装

- [should] フォームの送信ボタンは type="submit" にし、送信の処理は form の onSubmit に書く

## Props（自動生成）

型定義から生成した props の一覧です。react-aria-components から引き継いだ props の説明は英語です。DOM の汎用的な属性・イベントは省略しています。

### Button

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| appearance | "flat" \| "outlined" \| "transparent" \| "white" | flat | ボタンの外観スタイル |
| color | "neutral" \| "interactive" \| "negative" | neutral | ボタンの色テーマ |
| size | "s" \| "m" \| "l" | m | ボタンのサイズ |
| width | "auto" \| "half" \| "third" \| "full" | auto | ボタンの幅 |
| iconOnly | boolean | false | アイコンのみで表示する |
| leading | ReactNode | - | ボタンの先頭に表示するアイコン |
| trailing | ReactNode | - | ボタンの末尾に表示するアイコン |
| isPending | boolean | - | Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers. |
| isDisabled | boolean | - | Whether the button is disabled. |
| onPress | ((e: PressEvent) => void) | - | Handler that is called when the press is released over the target. |
| onPressStart | ((e: PressEvent) => void) | - | Handler that is called when a press interaction starts. |
| onPressEnd | ((e: PressEvent) => void) | - | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| onPressChange | ((isPressed: boolean) => void) | - | Handler that is called when the press state changes. |
| onPressUp | ((e: PressEvent) => void) | - | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| onClick | ((e: MouseEvent<FocusableElement, MouseEvent>) => void) | - | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides  additional event details for non-mouse interactions. |
| autoFocus | boolean | - | Whether the element should receive focus on render. |
| aria-disabled | boolean \| "true" \| "false" | - | Indicates whether the element is disabled to users of assistive technology. |
| aria-expanded | boolean \| "true" \| "false" | - | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
| aria-haspopup | boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog" | - | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
| aria-controls | string | - | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
| aria-pressed | boolean \| "true" \| "false" \| "mixed" | - | Indicates the current "pressed" state of toggle buttons. |
| aria-current | boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time" | - | Indicates whether this element represents the current item within a container or set of related elements. |
| type | "button" \| "submit" \| "reset" | 'button' | The behavior of the button when used in an HTML form. |
| preventFocusOnPress | boolean | - | Whether to prevent focus from moving to the button when pressing it. Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control. |
| form | string | - | The `<form>` element to associate the button with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form). |
| formAction | string | - | The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner. |
| formEncType | string | - | Indicates how to encode the form data that is submitted. |
| formMethod | string | - | Indicates the HTTP method used to submit the form. |
| formNoValidate | boolean | - | Indicates that the form is not to be validated when it is submitted. |
| formTarget | string | - | Overrides the target attribute of the button's form owner. |
| name | string | - | Submitted as a pair with the button's value as part of the form data. |
| value | string | - | The value associated with the button's name when it's submitted with the form data. |
| excludeFromTabOrder | boolean | - | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
| id | string | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label | string | - | Defines a string value that labels the current element. |
| aria-labelledby | string | - | Identifies the element (or elements) that labels the current element. |
| aria-describedby | string | - | Identifies the element (or elements) that describes the object. |
| aria-details | string | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| slot | string \| null | - | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |
| children | ChildrenOrFunction<ButtonRenderProps> | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | ClassNameOrFunction<ButtonRenderProps> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| style | StyleOrFunction<ButtonRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |