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.
StripeActionButton, StripeNavigation, StripeProductInfo and StripeTitle are components meant to be used only in StripeHeader.
Rules For Developers
- The
leftslot can contain a StripeProductInfo or a tertiary button. - The
centerslot can contain a StripeTitle or a StripeNavigation. - The
rightslot can contain a StripeActionButton, a secondary button (in a FocusPage - Detail configuration), or a tertiary “Close” button. - StripeHeader can be set to
stickywhen there’s a need to keep it always visible even when the user scrolls down. If you need to display other elements above it, usestickyOffset.
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
StripeNavigation
StripeProductInfo
StripeProductInfo supports dual currencies, see dual currencies example.
StripeActionButton
Large StripeHeader
In the large variant, there is more space for content and also an optional toolbar.
Rules For Developers
- In this variant props
centerandrightare not shown in large tiers. Also,leftprop allows rich content. - Use StripeToolbar component in
toolbarprop. Its alignment can be controlled using the Grid component.