# Link component for Stripe Apps Use links to navigate users from one page to another, and for actions that need more subtlety than a button provides. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/link?app-sdk-version=8. To add the `Link` component to your app: ```js import {Link} from '@stripe/ui-extension-sdk/ui'; ``` Stripe products have two types of links available: primary and secondary. ### Link props | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | `children` | (Required) `React.ReactNode` The contents of the component. | | `css` | (Optional) `CSS | undefined` Related types: [CSS](https://docs.stripe.com/stripe-apps/components/link.md#css). | | `disabled` | (Optional) `boolean | undefined` Whether the action is disabled. | | `external` | (Optional) `boolean | undefined` Whether linking out to an external resource. | | `href` | (Optional) `string | undefined` Native `href` attribute. | | `onPress` | (Optional) `((event: PressEvent) => void) | undefined` Handler that is called when the press is released over the target. | | `rel` | (Optional) `string | undefined` Native `rel` attribute. | | `tabIndex` | (Optional) `number | undefined` Overrides the default tab key behavior. Avoid using values other than `-1` and `0`. | | `target` | (Optional) `("_self" | "_blank" | "_top" | "_parent") | undefined` Where to display the linked URL, as the name for a browsing context. | | `type` | (Optional) `("primary" | "secondary") | undefined` The type of the `Link`. | | `className` | (Optional)(Deprecated) `string | undefined` | ### CSS | Property | Type | | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `alignX` | (Optional) `("start" | "center" | "end" | "stretch") | undefined` Horizontal alignment. See [Layout properties](https://docs.stripe.com/stripe-apps/style.md#layout-properties) for details. | | `width` | (Optional) `(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](https://docs.stripe.com/stripe-apps/style.md#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. ## 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. . ## Disabled links ## Opening links in new tabs ## Allowed href values The `href` attribute supports relative and HTTP or HTTPS URLs. You can also pass a [route descriptor](https://docs.stripe.com/stripe-apps/route-descriptors.md) to navigate within the Dashboard. Other values are sanitized at runtime. # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/link?app-sdk-version=9. To add the `Link` component to your app: ```js import {Link} from '@stripe/ui-extension-sdk/ui'; ``` Stripe products have two types of links available: primary and secondary. ### Link props | Property | Type | | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | (Required) `React.ReactNode` The contents of the component. | | `css` | (Optional) `CSS | undefined` Related types: [CSS](https://docs.stripe.com/stripe-apps/components/link.md#css). | | `disabled` | (Optional) `boolean | undefined` Whether the action is disabled. | | `external` | (Optional) `boolean | undefined` Whether linking out to an external resource. | | `href` | (Optional) `(string | RouteDescriptor) | undefined` A native `href` attribute or a [Dashboard route](https://docs.stripe.com/stripe-apps/route-descriptors.md) to navigate to. Related types: [RouteDescriptor](https://docs.stripe.com/stripe-apps/components/link.md#routedescriptor). | | `onPress` | (Optional) `((event: PressEvent) => void) | undefined` Handler that is called when the press is released over the target. | | `rel` | (Optional) `string | undefined` Native `rel` attribute. | | `tabIndex` | (Optional) `number | undefined` Overrides the default tab key behavior. Avoid using values other than `-1` and `0`. | | `target` | (Optional) `("_self" | "_blank" | "_top" | "_parent") | undefined` Where to display the linked URL, as the name for a browsing context. | | `type` | (Optional) `("primary" | "secondary") | undefined` The type of the `Link`. | ### CSS | Property | Type | | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `alignX` | (Optional) `("start" | "center" | "end" | "stretch") | undefined` Horizontal alignment. See [Layout properties](https://docs.stripe.com/stripe-apps/style.md#layout-properties) for details. | | `width` | (Optional) `(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](https://docs.stripe.com/stripe-apps/style.md#sizing) for details. | ### RouteDescriptor This is a union type. It can be one of: [BalanceOverviewRoute](https://docs.stripe.com/stripe-apps/components/link.md#balanceoverviewroute), [BillingRoute](https://docs.stripe.com/stripe-apps/components/link.md#billingroute), [CustomersRoute](https://docs.stripe.com/stripe-apps/components/link.md#customersroute), [CustomerDetailsRoute](https://docs.stripe.com/stripe-apps/components/link.md#customerdetailsroute), [DashboardRoute](https://docs.stripe.com/stripe-apps/components/link.md#dashboardroute), [FullPageRoute](https://docs.stripe.com/stripe-apps/components/link.md#fullpageroute), [InvoiceDetailsRoute](https://docs.stripe.com/stripe-apps/components/link.md#invoicedetailsroute), [InvoicesRoute](https://docs.stripe.com/stripe-apps/components/link.md#invoicesroute), [OnboardingRoute](https://docs.stripe.com/stripe-apps/components/link.md#onboardingroute), [PaymentDetailsRoute](https://docs.stripe.com/stripe-apps/components/link.md#paymentdetailsroute), [PaymentReviewDetailsRoute](https://docs.stripe.com/stripe-apps/components/link.md#paymentreviewdetailsroute), [PaymentsRoute](https://docs.stripe.com/stripe-apps/components/link.md#paymentsroute), [ProductDetailsRoute](https://docs.stripe.com/stripe-apps/components/link.md#productdetailsroute), [ProductsRoute](https://docs.stripe.com/stripe-apps/components/link.md#productsroute), [ReportsHubRoute](https://docs.stripe.com/stripe-apps/components/link.md#reportshubroute), [RevenueRecognitionRoute](https://docs.stripe.com/stripe-apps/components/link.md#revenuerecognitionroute), [ShippingRateDetailsRoute](https://docs.stripe.com/stripe-apps/components/link.md#shippingratedetailsroute), [ShippingRatesRoute](https://docs.stripe.com/stripe-apps/components/link.md#shippingratesroute), [SubscriptionDetailsRoute](https://docs.stripe.com/stripe-apps/components/link.md#subscriptiondetailsroute), [SubscriptionsRoute](https://docs.stripe.com/stripe-apps/components/link.md#subscriptionsroute), [TaxReportingLocationsRoute](https://docs.stripe.com/stripe-apps/components/link.md#taxreportinglocationsroute), [TaxReportingRoute](https://docs.stripe.com/stripe-apps/components/link.md#taxreportingroute). ### BalanceOverviewRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"balanceOverview"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### BillingRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"billing"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### CustomersRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"customers"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### CustomerDetailsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"customerDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/link.md#customerdetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### CustomerDetailsRoute Params | Property | Type | | ------------ | ------------------------------------------------ | | `customerId` | (Required) `string` The id of the customer. | ### DashboardRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"dashboard"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### FullPageRoute | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Required) `"fullPage"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | | `params` | (Optional) `Params | undefined` Related types: [Params](https://docs.stripe.com/stripe-apps/components/link.md#fullpageroute-params). | ### FullPageRoute Params | Property | Type | | -------- | --------------------------------------------------------------------------------- | | `appId` | (Optional) `string | undefined` The id of the app. | | `tabId` | (Optional) `string | undefined` The id of the tab that needs to be selected. | ### InvoiceDetailsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"invoiceDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/link.md#invoicedetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### InvoiceDetailsRoute Params | Property | Type | | ----------- | ----------------------------------------------- | | `invoiceId` | (Required) `string` The id of the invoice. | ### InvoicesRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"invoices"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### OnboardingRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"onboarding"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | | `params` | (Optional) `Params | undefined` Related types: [Params](https://docs.stripe.com/stripe-apps/components/link.md#onboardingroute-params). | ### OnboardingRoute Params | Property | Type | | -------- | ------------------------------------------------------- | | `appId` | (Optional) `string | undefined` The id of the app. | ### PaymentDetailsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"paymentDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/link.md#paymentdetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### PaymentDetailsRoute Params | Property | Type | | ----------- | ----------------------------------------------- | | `paymentId` | (Required) `string` The id of the payment. | ### PaymentReviewDetailsRoute | Property | Type | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `name` | (Required) `"paymentReviewDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/link.md#paymentreviewdetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### PaymentReviewDetailsRoute Params | Property | Type | | ----------- | ----------------------------------------------- | | `paymentId` | (Required) `string` The id of the payment. | ### PaymentsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"payments"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### ProductDetailsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"productDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/link.md#productdetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### ProductDetailsRoute Params | Property | Type | | ----------- | ----------------------------------------------- | | `productId` | (Required) `string` The id of the product. | ### ProductsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"products"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### ReportsHubRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"reportsHub"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### RevenueRecognitionRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"revenueRecognition"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### ShippingRateDetailsRoute | Property | Type | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"shippingRateDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/link.md#shippingratedetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### ShippingRateDetailsRoute Params | Property | Type | | ---------------- | ----------------------------------------------------- | | `shippingRateId` | (Required) `string` The id of the shipping rate. | ### ShippingRatesRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"shippingRates"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### SubscriptionDetailsRoute | Property | Type | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"subscriptionDetails"` | | `params` | (Required) `Params` Related types: [Params](https://docs.stripe.com/stripe-apps/components/link.md#subscriptiondetailsroute-params). | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### SubscriptionDetailsRoute Params | Property | Type | | ---------------- | ---------------------------------------------------- | | `subscriptionId` | (Required) `string` The id of the subscription. | ### SubscriptionsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"subscriptions"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### TaxReportingLocationsRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"taxReportingLocations"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ### TaxReportingRoute | Property | Type | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------- | | `name` | (Required) `"taxReporting"` | | `envParams` | (Optional) `{ [x: string]: string; } | undefined` Query params that are passed to Extension views via the `environment` prop. | ## 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. ## 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. . ## Disabled links ## Opening links in new tabs ## Allowed href values The `href` attribute supports relative and HTTP or HTTPS URLs. You can also pass a [route descriptor](https://docs.stripe.com/stripe-apps/route-descriptors.md) to navigate within the Dashboard. Other values are sanitized at runtime. ## See also - [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md) - [Style your app](https://docs.stripe.com/stripe-apps/style.md) - [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)