Button component for Stripe Apps

To add the Button component to your app:

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

There are multiple button types available:

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

Button props

CSS

Content guidelines

Use the {verb} + {noun} formula for labels

For example, Update customer. It’s acceptable to break this pattern in the case of common actions like Done, Close, Cancel, Add, or Delete.

Be as descriptive as possible

When a button performs an action or navigates the user to a location, try to name that action or location within the label.

Use sentence case

This applies for most cases except proper nouns and phrases.

Avoid punctuation

Avoid periods, exclamation points, and question marks.

Use second person

When referring to the user within a button or link, always use second person personal pronouns. Example: Post your status.

Primary buttons

Primary buttons initiate the primary action of any given page or flow. Avoid having more than one primary button available to the user at a given time.

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

Secondary buttons

Secondary buttons are the default and most common buttons in product interfaces. In general, use the secondary style for buttons that aren’t for primary actions.

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

Destructive buttons

Use destructive buttons exclusively for actions that result in the destruction of any object or data.

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

Button sizes

Buttons are available in three sizes, which determine the height of the element. Buttons can be as wide as needed to fill their container.

• You can use small buttons in contexts where space is limited or to match the size of other, small text such as legal terms, and so on.
• Medium is the default size for buttons.
• You can use large buttons in contexts where a call to action (CTA) needs increased prominence.

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

Disabled buttons

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

Icons in buttons

Use an icon inside of a button:

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

Full-width buttons

Create a full-width Button component using the css prop:

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

Opening links in new tabs

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