Inline component for Stripe Apps

The inline component is used to style inline content such as text.

SDK version

To add the Inline component to your app:

Inline components are styleable inline elements, equivalent to a span in HTML. They support custom styles. If you’d like to render or style block-level elements, see the Box component.

Loading example...

<Inline
 css={{
 font: 'body',
 fontWeight: 'semibold',
 color: 'success',
 marginY: 'large',
 }}
>
 This is an example of the inline component.
</Inline>

Inline props

CSS

Emphasized text

Loading example...

<Inline css={{font: 'body', color: 'primary', fontWeight: 'semibold'}}>
 This text is emphasized
</Inline>

Secondary text

Loading example...

<Inline css={{font: 'caption', color: 'secondary'}}>
 This text is styled using the caption text style and the secondary color.
</Inline>

Custom CSS

The Inline component supports custom styles. This example demonstrates usage of the boxShadow property.

Loading example...

<Box css={{stack: 'y', gap: 'large'}}>
 {['boxShadow', 'topShadow', 'focusRing'].map((shadowProp) => {
 return (
 <Box css={{stack: 'y', gap: 'medium'}} key={shadowProp}>
 <Box css={{font: 'heading', fontFamily: 'monospace'}}>
 {shadowProp}
 </Box>
 {['base', 'hover', 'focus', 'top'].map((shadowValue) => (
 <Box key={[shadowProp, shadowValue].join('-')} css={{stack: 'x'}}>
 <Inline
 css={{
 font: 'body',
 padding: 'large',
 fontFamily: 'monospace',
 [shadowProp]: shadowValue,
 }}
 >
 {shadowProp}={shadowValue}
 </Inline>
 </Box>
 ))}
 </Box>
 );
 })}
</Box>

See also

• Design patterns to follow
• Style your app
• UI testing