Stripe Apps の Button コンポーネント
ユーザーはボタンを使用してアクションを実行できます。また、ユーザーの注意を引いたり、結果を警告したりするためにボタンを使用できます。
Button コンポーネントをアプリに追加するには、以下のようにします。
import {Button} from '@stripe/ui-extension-sdk/ui';
複数の種類のボタンを使用できます。
<Button type="primary">Primary</Button> <Button>Secondary</Button> <Button type="destructive">Destructive</Button>
ボタンのプロパティ
| プロパティー | タイプ |
|---|---|
| 必須
コンポーネントのコンテンツ。 |
| オプション
関連タイプ: CSS。 |
| オプション
アクションが無効化されているかどうか。 |
| オプション
ネイティブの |
| オプション
ターゲット上で押したときに呼び出されるハンドラ。 |
| オプション
コンポーネントのサイズ。 |
| オプション
閲覧コンテキストの名前として、リンクされた URL を表示する場所。 |
| オプション
|
| オプション非推奨
|
CSS
| プロパティー | タイプ |
|---|---|
| オプション
水平方向の配置。詳細については、レイアウトのプロパティをご覧ください。 |
| オプション
コンポーネントの幅。詳細については、サイズ指定をご覧ください。 |
コンテンツのガイドライン
ラベルには {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>
ボタン内アイコン
ボタン内でアイコンを使用します。
<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>