ボタン

ユーザーはボタンを使用してアクションを実行できます。また、ユーザーの注意を引いたり、結果を警告したりするためにボタンを使用できます。

SDK バージョン

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

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

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

<Button type="primary">Primary</Button>
<Button>Secondary</Button>
<Button type="destructive">Destructive</Button>

ボタンのプロパティ

プロパティー	タイプ
`children`	必須 `React.ReactNode` コンポーネントのコンテンツ。
`css`	オプション `Object` Related types: CSS.
`disabled`	オプション `boolean \| undefined` アクションが無効化されているかどうか。
`href`	オプション `string \| undefined` ネイティブの `href` 属性。
`onPress`	オプション `((event: PressEvent) => void) \| undefined` ターゲット上で押したときに呼び出されるハンドラ。
`size`	オプション `("small" \| "medium" \| "large") \| undefined` コンポーネントのサイズ。
`target`	オプション `("_self" \| "_blank" \| "_top" \| "_parent") \| undefined` Where to display the linked URL, as the name for a browsing context.
`type`	オプション `("primary" \| "secondary" \| "destructive") \| undefined` ボタンのタイプ。
`className`	オプション非推奨 `string \| undefined`

CSS

プロパティータイプ

プロパティー	タイプ
`alignX`	オプション `("start" \| "center" \| "end" \| "stretch") \| undefined` Horizontal alignment. See Layout properties for details.
`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` The width of the component. See Sizing for details.

alignX

オプション

("start" | "center" | "end" | "stretch") | undefined

Horizontal alignment. See Layout properties for details.

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

The width of the component. See Sizing for details.

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

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

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

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

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

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

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

句読点は使用しない

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

第二人称を使用する

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

一次ボタン

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

<Button type="primary" onPress={() => console.log('Button was pressed')}>
  Primary button
</Button>

二次ボタン

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

<Button onPress={() => console.log('Button was pressed')}>
  Secondary button
</Button>

破壊的ボタン

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

<Button type="destructive" onPress={() => console.log('Button was pressed')}>
  Destructive button
</Button>

ボタンのサイズ

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

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

<Button size="small">Small button</Button>
<Button>Medium button</Button>
<Button size="large">Large button</Button>

無効化されたボタン

<Button type="primary" disabled>Hello!</Button>
<Button disabled>Secondary</Button>
<Button type="destructive" disabled>Destructive</Button>

ボタン内アイコン

Use an icon inside of a button:

<Button type="primary">
  <Icon name="addCircle" />
  Add customer
</Button>

全幅ボタン

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

<Button type="primary" css={{width: 'fill', alignX: 'center'}}>
  Full-width button
</Button>

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

<Button href="https://stripe.com" target="_blank">
  Open link in new tab
</Button>

ボタン