# Stripe Apps の Button コンポーネント

ボタンでユーザーがアクションを起こせるようにしたり、ユーザーの注意を向けさせたり、結果を警告したりします。

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/button?app-sdk-version=8.

`Button` コンポーネントをアプリに追加するには、以下のようにします。

```js
import {Button} from '@stripe/ui-extension-sdk/ui';
```

複数の種類のボタンを使用できます。

### ボタンのプロパティ

| プロパティー      | タイプ                                                                                                        |
| ----------- | ---------------------------------------------------------------------------------------------------------- |
| `children`  | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                                                                 |
| `css`       | (オプション)
  `CSS | undefined`

  関連タイプ: [CSS](https://docs.stripe.com/stripe-apps/components/button.md#css)。 |
| `disabled`  | (オプション)
  `boolean | undefined`

  アクションが無効化されているかどうか。                                                     |
| `href`      | (オプション)
  `string | undefined`

  ネイティブの `href` 属性。                                                        |
| `onPress`   | (オプション)
  `((event: PressEvent) => void) | undefined`

  ターゲット上で押したときに呼び出されるハンドラ。                          |
| `size`      | (オプション)
  `("small" | "medium" | "large") | undefined`

  コンポーネントのサイズ。                                     |
| `target`    | (オプション)
  `("_self" | "_blank" | "_top" | "_parent") | undefined`

  閲覧コンテキストの名前として、リンクされた URL を表示する場所。    |
| `type`      | (オプション)
  `("primary" | "secondary" | "destructive") | undefined`

  `Button` のタイプ。                        |
| `className` | (オプション)(非推奨)
  `string | undefined`                                                                        |

### CSS

| プロパティー   | タイプ                                                                                                                                                                                                                                                                                                                                                                                               |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `alignX` | (オプション)
  `("start" | "center" | "end" | "stretch") | undefined`

  水平方向の配置。詳細については、[レイアウトのプロパティ](https://docs.stripe.com/stripe-apps/style.md#layout-properties)をご覧ください。                                                                                                                                                                                                                         |
| `width`  | (オプション)
  `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined`

  コンポーネントの幅。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 |

## コンテンツのガイドライン

### ラベルには {noun} + {verb} の形式を使用する

例: **Update customer (顧客を更新)**。**完了**、**閉じる**、**キャンセル**、**追加**、**削除**などの一般的なアクションでは、このパターンを使用しなくても構いません。

### できるだけ詳しく説明する

ボタンでアクションを実行したり、ユーザーを他の場所に誘導したりする場合は、そのアクションや場所をラベルで指定してください。

### センテンスケース (先頭の 1 文字を大文字) を使用する

これは、固有名詞や固有フレーズを除く、ほとんどのケースに該当します。

### 句読点は使用しない

句読点、感嘆符、疑問符は使用しません。

### 第二人称を使用する

ボタンやリンクでユーザーを指す場合には、常に、第二人称の人称代名詞を使用します (例: **Post your status (ステータスを投稿)**)。

## 一次ボタン

一次ボタンは、ページやフローの一次アクションを開始します。一度に、1 つ以上の一次ボタンをユーザーに提供しないでください。

## 二次ボタン

二次ボタンは、製品インターフェイスにおいてデフォルトの、最も一般的なボタンです。通常、一次アクション用ではないボタンには二次スタイルを使用します。

## 破壊的ボタン

破壊的ボタンは、オブジェクトまたはデータを破壊するアクション専用に使用します。

## ボタンのサイズ

ボタンには 3 つのサイズがあり、これはエレメントの高さを決定します。ボタンの幅は、そのコンテナーを含めるために必要な幅に設定できます。

- スペースに限りがある場合や、法務規約の小さなテキストなど、他のサイズに合わせるために、小さなボタンを使用できます。
- 中サイズはボタンのデフォルトサイズです。
- 行動喚起 (CTA) をより目立たせる必要がある場合、大きいボタンを使用できます。

## 無効化されたボタン

## ボタン内アイコン

ボタン内で[アイコン](https://docs.stripe.com/stripe-apps/components/icon.md)を使用します。

## 全幅ボタン

`css` プロパティを使用して、全幅の `Button` コンポーネントを作成します。

## 新しいタブでリンクを開く


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/button?app-sdk-version=9.

`Button` コンポーネントをアプリに追加するには、以下のようにします。

```js
import {Button} from '@stripe/ui-extension-sdk/ui';
```

複数の種類のボタンを使用できます。

### ボタンのプロパティ

| プロパティー     | タイプ                                                                                                                                                                                                                 |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `children` | (必須)
  `React.ReactNode`

  コンポーネントのコンテンツ。                                                                                                                                                                          |
| `css`      | (オプション)
  `CSS | undefined`

  関連タイプ: [CSS](https://docs.stripe.com/stripe-apps/components/button.md#css)。                                                                                                          |
| `disabled` | (オプション)
  `boolean | undefined`

  アクションが無効化されているかどうか。                                                                                                                                                              |
| `href`     | (オプション)
  `((string | RouteDescriptor) | undefined) | undefined`

  移動先のネイティブの `href` 属性またはダッシュボードの経路を選定します。

  関連タイプ: [RouteDescriptor](https://docs.stripe.com/stripe-apps/components/button.md#routedescriptor)。 |
| `onPress`  | (オプション)
  `((event: PressEvent) => void) | undefined`

  ターゲット上で押したときに呼び出されるハンドラ。                                                                                                                                   |
| `pending`  | (オプション)
  `boolean | undefined`

  ビジュアルスタイルを保留中に設定し、`Button` を機能的に無効化します。                                                                                                                                          |
| `size`     | (オプション)
  `("small" | "medium" | "large") | undefined`

  コンポーネントのサイズ。                                                                                                                                              |
| `target`   | (オプション)
  `("_self" | "_blank" | "_top" | "_parent") | undefined`

  閲覧コンテキストの名前として、リンクされた URL を表示する場所。                                                                                                             |
| `type`     | (オプション)
  `("primary" | "secondary" | "destructive") | undefined`

  `Button` のタイプ。                                                                                                                                 |

### CSS

| プロパティー   | タイプ                                                                                                                                                                                                                                                                                                                                                                                               |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `alignX` | (オプション)
  `("start" | "center" | "end" | "stretch") | undefined`

  水平方向の配置。詳細については、[レイアウトのプロパティ](https://docs.stripe.com/stripe-apps/style.md#layout-properties)をご覧ください。                                                                                                                                                                                                                         |
| `width`  | (オプション)
  `(number | "auto" | "fill" | "min" | "max" | "fit" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12") | undefined`

  コンポーネントの幅。詳細については、[サイズ指定](https://docs.stripe.com/stripe-apps/style.md#sizing)をご覧ください。 |

### RouteDescriptor

これはユニオン型です。[BalanceOverviewRoute](https://docs.stripe.com/stripe-apps/components/button.md#balanceoverviewroute)、[BillingRoute](https://docs.stripe.com/stripe-apps/components/button.md#billingroute)、[CustomersRoute](https://docs.stripe.com/stripe-apps/components/button.md#customersroute)、[CustomerDetailsRoute](https://docs.stripe.com/stripe-apps/components/button.md#customerdetailsroute)、[DashboardRoute](https://docs.stripe.com/stripe-apps/components/button.md#dashboardroute)、[FullPageRoute](https://docs.stripe.com/stripe-apps/components/button.md#fullpageroute)、[InvoiceDetailsRoute](https://docs.stripe.com/stripe-apps/components/button.md#invoicedetailsroute)、[InvoicesRoute](https://docs.stripe.com/stripe-apps/components/button.md#invoicesroute)、[OnboardingRoute](https://docs.stripe.com/stripe-apps/components/button.md#onboardingroute)、[PaymentDetailsRoute](https://docs.stripe.com/stripe-apps/components/button.md#paymentdetailsroute)、[PaymentReviewDetailsRoute](https://docs.stripe.com/stripe-apps/components/button.md#paymentreviewdetailsroute)、[PaymentsRoute](https://docs.stripe.com/stripe-apps/components/button.md#paymentsroute)、[ProductDetailsRoute](https://docs.stripe.com/stripe-apps/components/button.md#productdetailsroute)、[ProductsRoute](https://docs.stripe.com/stripe-apps/components/button.md#productsroute)、[ReportsHubRoute](https://docs.stripe.com/stripe-apps/components/button.md#reportshubroute)、[RevenueRecognitionRoute](https://docs.stripe.com/stripe-apps/components/button.md#revenuerecognitionroute)、[ShippingRateDetailsRoute](https://docs.stripe.com/stripe-apps/components/button.md#shippingratedetailsroute)、[ShippingRatesRoute](https://docs.stripe.com/stripe-apps/components/button.md#shippingratesroute)、[SubscriptionDetailsRoute](https://docs.stripe.com/stripe-apps/components/button.md#subscriptiondetailsroute)、[SubscriptionsRoute](https://docs.stripe.com/stripe-apps/components/button.md#subscriptionsroute)、[TaxReportingLocationsRoute](https://docs.stripe.com/stripe-apps/components/button.md#taxreportinglocationsroute)、[TaxReportingRoute](https://docs.stripe.com/stripe-apps/components/button.md#taxreportingroute) のいずれかになります。

### BalanceOverviewRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"balanceOverview"`                                                                     |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### BillingRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"billing"`                                                                             |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### CustomersRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"customers"`                                                                           |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### CustomerDetailsRoute

| プロパティー      | タイプ                                                                                                                       |
| ----------- | ------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"customerDetails"`                                                                                                |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/button.md#customerdetailsroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                            |

### CustomerDetailsRoute Params

| プロパティー       | タイプ                        |
| ------------ | -------------------------- |
| `customerId` | (必須)
  `string`

  顧客の ID。 |

### DashboardRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"dashboard"`                                                                           |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### FullPageRoute

| プロパティー      | タイプ                                                                                                                |
| ----------- | ------------------------------------------------------------------------------------------------------------------ |
| `name`      | (必須)
  `"fullPage"`                                                                                                |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/button.md#fullpageroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                     |

### FullPageRoute Params

| プロパティー  | タイプ                                                |
| ------- | -------------------------------------------------- |
| `appId` | (必須)
  `string`

  アプリの ID。                        |
| `tabId` | (オプション)
  `string | undefined`

  選択する必要があるタブの ID。 |

### InvoiceDetailsRoute

| プロパティー      | タイプ                                                                                                                      |
| ----------- | ------------------------------------------------------------------------------------------------------------------------ |
| `name`      | (必須)
  `"invoiceDetails"`                                                                                                |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/button.md#invoicedetailsroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                           |

### InvoiceDetailsRoute Params

| プロパティー      | タイプ                         |
| ----------- | --------------------------- |
| `invoiceId` | (必須)
  `string`

  請求書の ID。 |

### InvoicesRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"invoices"`                                                                            |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### OnboardingRoute

| プロパティー      | タイプ                                                                                                                  |
| ----------- | -------------------------------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"onboarding"`                                                                                                |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/button.md#onboardingroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                       |

### OnboardingRoute Params

| プロパティー  | タイプ                         |
| ------- | --------------------------- |
| `appId` | (必須)
  `string`

  アプリの ID。 |

### PaymentDetailsRoute

| プロパティー      | タイプ                                                                                                                      |
| ----------- | ------------------------------------------------------------------------------------------------------------------------ |
| `name`      | (必須)
  `"paymentDetails"`                                                                                                |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/button.md#paymentdetailsroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                           |

### PaymentDetailsRoute Params

| プロパティー      | タイプ                        |
| ----------- | -------------------------- |
| `paymentId` | (必須)
  `string`

  決済の ID。 |

### PaymentReviewDetailsRoute

| プロパティー      | タイプ                                                                                                                            |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `name`      | (必須)
  `"paymentReviewDetails"`                                                                                                |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/button.md#paymentreviewdetailsroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                                 |

### PaymentReviewDetailsRoute Params

| プロパティー      | タイプ                        |
| ----------- | -------------------------- |
| `paymentId` | (必須)
  `string`

  決済の ID。 |

### PaymentsRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"payments"`                                                                            |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### ProductDetailsRoute

| プロパティー      | タイプ                                                                                                                      |
| ----------- | ------------------------------------------------------------------------------------------------------------------------ |
| `name`      | (必須)
  `"productDetails"`                                                                                                |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/button.md#productdetailsroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                           |

### ProductDetailsRoute Params

| プロパティー      | タイプ                        |
| ----------- | -------------------------- |
| `productId` | (必須)
  `string`

  商品の ID。 |

### ProductsRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"products"`                                                                            |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### ReportsHubRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"reportsHub"`                                                                          |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### RevenueRecognitionRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"revenueRecognition"`                                                                  |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### ShippingRateDetailsRoute

| プロパティー      | タイプ                                                                                                                           |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"shippingRateDetails"`                                                                                                |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/button.md#shippingratedetailsroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                                |

### ShippingRateDetailsRoute Params

| プロパティー           | タイプ                          |
| ---------------- | ---------------------------- |
| `shippingRateId` | (必須)
  `string`

  配送料金の ID。 |

### ShippingRatesRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"shippingRates"`                                                                       |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### SubscriptionDetailsRoute

| プロパティー      | タイプ                                                                                                                           |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"subscriptionDetails"`                                                                                                |
| `params`    | (必須)
  `Params`

  関連タイプ: [Params](https://docs.stripe.com/stripe-apps/components/button.md#subscriptiondetailsroute-params)。 |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。                                |

### SubscriptionDetailsRoute Params

| プロパティー           | タイプ                               |
| ---------------- | --------------------------------- |
| `subscriptionId` | (必須)
  `string`

  サブスクリプションの ID。 |

### SubscriptionsRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"subscriptions"`                                                                       |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### TaxReportingLocationsRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"taxReportingLocations"`                                                               |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

### TaxReportingRoute

| プロパティー      | タイプ                                                                                            |
| ----------- | ---------------------------------------------------------------------------------------------- |
| `name`      | (必須)
  `"taxReporting"`                                                                        |
| `envParams` | (オプション)
  `{ [x: string]: string; } | undefined`

  `environment` プロパティを介して拡張ビューに渡されるクエリパラメータ。 |

## コンテンツのガイドライン

### ラベルには {noun} + {verb} の形式を使用する

例: **Update customer (顧客を更新)**。**完了**、**閉じる**、**キャンセル**、**追加**、**削除**などの一般的なアクションでは、このパターンを使用しなくても構いません。

### できるだけ詳しく説明する

ボタンでアクションを実行したり、ユーザーを他の場所に誘導したりする場合は、そのアクションや場所をラベルで指定してください。

### センテンスケース (先頭の 1 文字を大文字) を使用する

これは、固有名詞や固有フレーズを除く、ほとんどのケースに該当します。

### 句読点は使用しない

句読点、感嘆符、疑問符は使用しません。

### 第二人称を使用する

ボタンやリンクでユーザーを指す場合には、常に、第二人称の人称代名詞を使用します (例: **Post your status (ステータスを投稿)**)。

## 一次ボタン

一次ボタンは、ページやフローの一次アクションを開始します。一度に、1 つ以上の一次ボタンをユーザーに提供しないでください。

## 二次ボタン

二次ボタンは、製品インターフェイスにおいてデフォルトの、最も一般的なボタンです。通常、一次アクション用ではないボタンには二次スタイルを使用します。

## 破壊的ボタン

破壊的ボタンは、オブジェクトまたはデータを破壊するアクション専用に使用します。

## ボタンのサイズ

ボタンには 3 つのサイズがあり、これはエレメントの高さを決定します。ボタンの幅は、そのコンテナーを含めるために必要な幅に設定できます。

- スペースに限りがある場合や、法務規約の小さなテキストなど、他のサイズに合わせるために、小さなボタンを使用できます。
- 中サイズはボタンのデフォルトサイズです。
- 行動喚起 (CTA) をより目立たせる必要がある場合、大きいボタンを使用できます。

## 無効化されたボタン

## ボタン内アイコン

ボタン内で[アイコン](https://docs.stripe.com/stripe-apps/components/icon.md)を使用します。

## 全幅ボタン

`css` プロパティを使用して、全幅の `Button` コンポーネントを作成します。

## 新しいタブでリンクを開く

## 保留中のボタン


## See also

- [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md)
- [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md)
- [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)