Stripe Beta React-only

Open in Storybook Open in Figma

StripeHeader is a container used near the top of a page. It can contain components for navigation/hierarchy, and shortcuts to important functionality.

HINT StripeHeader shouldn’t be used with a centered Card right below it, please use a FocusPage instead.

Loading demo…

StripeActionButton, StripeNavigation, StripeProductInfo and StripeTitle are components meant to be used only in StripeHeader.

Rules For Developers

The left slot can contain a StripeProductInfo or a tertiary button.
The center slot can contain a StripeTitle or a StripeNavigation.
The right slot can contain a StripeActionButton, a secondary button (in a FocusPage - Detail configuration), or a tertiary “Close” button.
StripeHeader can be set to sticky when there’s a need to keep it always visible even when the user scrolls down. If you need to display other elements above it, use stickyOffset.

Stripe components

There are some components specifically designed to be used in StripeHeader. A few examples can be found below.

HINT For a better understanding, please open the demos in the responsive viewer or in Playroom.

StripeTitle

Loading demo…

StripeNavigation

Open in Figma

Loading demo…

StripeProductInfo

Loading demo…

StripeProductInfo supports dual currencies, see dual currencies example.

StripeActionButton

Loading demo…

Large StripeHeader

In the large variant, there is more space for content and also an optional toolbar.

Loading demo…

Rules For Developers

In this variant props center and right are not shown in large tiers. Also, left prop allows rich content.
Use StripeToolbar component in toolbar prop. Its alignment can be controlled using the Grid component.