ボタン
ユーザーはボタンを使用してアクションを実行できます。また、ユーザーの注意を引いたり、結果を警告したりするためにボタンを使用できます。
Button
コンポーネントをアプリに追加するには、以下のようにします。
import {Button} from '@stripe/ui-extension-sdk/ui';
複数の種類のボタンを使用できます。
<Button type="primary">Primary</Button> <Button>Secondary</Button> <Button type="destructive">Destructive</Button>
Props
Prop | Type | Description |
---|---|---|
className |
| |
disabled |
| Whether the action is disabled. |
href |
| Native `href` attribute |
onPress |
| Handler that is called when the press is released over the target. |
size |
| The size of the button |
target |
| |
type |
| The type of the button |
CSS
ボタンは、以下の CSS プロパティに対応しています。
プロパティ | タイプ | 例 |
alignX | ‘start’ | ‘center’ | ‘end’ | ‘stretch’ | ‘center’ |
水平方向の配置。詳細については、レイアウトのプロパティをご覧ください。 | ||
width | 2/3 | |
ボタンの幅。詳細については、サイズ指定をご覧ください。 |
ボタンは、その他の CSS に対応していません。代わりに size
および type
プロパティを使用してください。
一次ボタン
一次ボタンは、ページやフローの一次アクションを開始します。一度に、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>
コンテンツのガイドライン
ラベルには {noun} + {verb} の形式を使用する
例: Update customer (顧客を更新)。完了、閉じる、キャンセル、追加、削除などの一般的なアクションでは、このパターンを使用しなくても構いません。
できるだけ詳しく説明する
ボタンでアクションを実行したり、ユーザーを他の場所に誘導したりする場合は、そのアクションや場所をラベルで指定してください。
センテンスケース (先頭の 1 文字を大文字) を使用する
これは、固有名詞や固有フレーズを除く、ほとんどのケースに該当します。
句読点は使用しない
句読点、感嘆符、疑問符は使用しません。
第二人称を使用する
ボタンやリンクでユーザーを指す場合には、常に、第二人称の人称代名詞を使用します (例: Post your status (ステータスを投稿))。
全幅ボタン
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>