Link component for Stripe Apps
Links are used for navigating users from one page to another, and for actions that need more subtlety than a button provides.
To add the Link component to your app:
import {Link} from '@stripe/ui-extension-sdk/ui';
Stripe products have two types of links available: primary and secondary.
<Link href="https://www.stripe.com">Primary link</Link> <Link type="secondary" href="https://www.stripe.com"> Secondary link </Link>
Link props
| Property | Type |
|---|---|
| Required
The contents of the component. |
| Optional
Related types: CSS. |
| Optional
Whether the action is disabled. |
| Optional
Whether linking out to an external resource. |
| Optional
Native |
| Optional
Handler that is called when the press is released over the target. |
| Optional
Native |
| Optional
Overrides the default tab key behavior. Avoid using values other than |
| Optional
Where to display the linked URL, as the name for a browsing context. |
| Optional
The type of the |
| OptionalDeprecated
|
CSS
| Property | Type |
|---|---|
| Optional
Horizontal alignment. See Layout properties for details. |
| Optional
The width of the component. See Sizing for details. |
Primary link
The primary style is the default for links. Use it whenever linking out to external resources or to other pages within the application.
<Link href="https://www.stripe.com">Primary link</Link> <Link external href="https://www.example.com"> External primary link </Link>
Secondary link
Use secondary links in the following situations:
- When a link would otherwise clash with another nearby primary button or link
- When a page presents many items that are each a link. Because a page full of primary links could be overwhelming, we use secondary links in these cases.
- When linking to an object like a Customer, Payment, Product, and so on. Wherever the UI refers to these objects, link them. Use the secondary style to eliminate visual clutter, as one page might link many objects. .
<Link type="secondary" href="https://www.stripe.com"> Secondary link </Link>
Disabled links
<Link disabled href="https://www.stripe.com"> Primary link </Link> <Link disabled type="secondary" href="https://www.stripe.com"> Secondary link </Link>
Opening links in new tabs
<Link href="https://stripe.com" target="_blank"> Open link in new tab </Link>
Allowed href values
The href attribute supports relative and http or https URLs. Other values are sanitized at runtime.