Inline

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

SDK version

To add the Inline component to your app:

import {Inline} from '@stripe/ui-extension-sdk/ui';

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.

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

Inline props

Property Type

Property	Type
`children`	Required `React.ReactNode` The contents of the component.
`css`	Optional `Object` Related types: CSS.

children

Required

React.ReactNode

The contents of the component.

css

Optional

Object

Related types: CSS.

CSS

Property	Type
`alignSelfX`	Optional `("start" \| "center" \| "end" \| "stretch") \| undefined` Horizontal alignment. See Layout properties for details.
`alignSelfY`	Optional `("top" \| "center" \| "baseline" \| "bottom" \| "stretch") \| undefined` Vertical alignment. See Layout properties for details.
`alignX`	Optional `("start" \| "center" \| "end" \| "stretch") \| undefined` Horizontal alignment. See Layout properties for details.
`alignY`	Optional `("top" \| "center" \| "baseline" \| "bottom" \| "stretch") \| undefined` Vertical alignment. See Layout properties for details.
`backgroundColor`	Optional `("container" \| "surface") \| undefined`
`bleed`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedBottom`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedLeft`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedRight`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedTop`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedX`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`bleedY`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`borderBottomLeftRadius`	Optional `("none" \| "xsmall" \| "small" \| "medium" \| "large" \| "rounded") \| undefined`
`borderBottomRightRadius`	Optional `("none" \| "xsmall" \| "small" \| "medium" \| "large" \| "rounded") \| undefined`
`borderRadius`	Optional `("none" \| "xsmall" \| "small" \| "medium" \| "large" \| "rounded") \| undefined`
`borderTopLeftRadius`	Optional `("none" \| "xsmall" \| "small" \| "medium" \| "large" \| "rounded") \| undefined`
`borderTopRightRadius`	Optional `("none" \| "xsmall" \| "small" \| "medium" \| "large" \| "rounded") \| undefined`
`bottom`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`boxShadow`	Optional `("none" \| "base" \| "top" \| "hover" \| "focus") \| undefined`
`color`	Optional `("brand" \| "primary" \| "secondary" \| "disabled" \| "info" \| "success" \| "attention" \| "critical") \| undefined`
`columnGap`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`display`	Optional `"grid" \| undefined`
`distribute`	Optional `("packed" \| "space-between") \| undefined`
`fill`	Optional `("brand" \| "primary" \| "secondary" \| "disabled" \| "info" \| "success" \| "attention" \| "critical") \| undefined`
`focusRing`	Optional `("none" \| "base" \| "top" \| "hover" \| "focus") \| undefined`
`font`	Optional `("body" \| "bodyEmphasized" \| "caption" \| "heading" \| "kicker" \| "lead" \| "subheading" \| "subtitle" \| "title") \| undefined`
`fontFamily`	Optional `("monospace" \| "ui") \| undefined`
`fontWeight`	Optional `("regular" \| "semibold" \| "bold") \| undefined`
`gap`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`gapX`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`gapY`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`gridColumns`	Optional `number \| undefined`
`height`	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 height of the component. See Sizing for details.
`inset`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`keyline`	Optional `("neutral" \| "critical") \| undefined`
`left`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`margin`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginBottom`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginLeft`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginRight`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginTop`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginX`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`marginY`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`maxHeight`	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 height of the component. See Sizing for details.
`maxWidth`	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 for details.
`minHeight`	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 height of the component. See Sizing for details.
`minTileWidth`	Optional `(number \| "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`
`minWidth`	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 for details.
`overflow`	Optional `("visible" \| "hidden" \| "clip" \| "scroll" \| "auto") \| undefined`
`overflowWrap`	Optional `("break-word" \| "normal") \| undefined`
`overflowX`	Optional `("visible" \| "hidden" \| "clip" \| "scroll" \| "auto") \| undefined`
`overflowY`	Optional `("visible" \| "hidden" \| "clip" \| "scroll" \| "auto") \| undefined`
`padding`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingBottom`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingLeft`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingRight`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingTop`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingX`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`paddingY`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`rowGap`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`stack`	Optional `("x" \| "y" \| "z") \| undefined`
`textAlign`	Optional `("center" \| "end" \| "justify" \| "left" \| "match-parent" \| "right" \| "start") \| undefined`
`textOverflow`	Optional `"ellipsis" \| undefined`
`textTransform`	Optional `("capitalize" \| "uppercase" \| "lowercase" \| "none" \| "full-width" \| "full-size-kana") \| undefined`
`top`	Optional `(number \| "xxsmall" \| "xsmall" \| "small" \| "medium" \| "large" \| "xlarge" \| "xxlarge") \| undefined`
`topShadow`	Optional `("none" \| "base" \| "top" \| "hover" \| "focus") \| undefined`
`whiteSpace`	Optional `("normal" \| "nowrap" \| "pre" \| "pre-wrap" \| "pre-line" \| "break-spaces") \| undefined`
`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 for details.
`wordBreak`	Optional `("normal" \| "break-all" \| "keep-all" \| "break-word") \| undefined`
`wordWrap`	Optional `("break-word" \| "normal") \| undefined`
`wrap`	Optional `("wrap" \| "nowrap" \| "wrap-reverse") \| undefined`
`zIndex`	Optional `("overlay" \| "partial") \| undefined`
`background`	OptionalDeprecated Use the `backgroundColor` property instead. `("container" \| "surface") \| undefined`
`borderBottomColor`	OptionalDeprecated Use the `keyline` property instead. `("neutral" \| "critical") \| undefined`
`borderColor`	OptionalDeprecated Use the `keyline` property instead. `("neutral" \| "critical") \| undefined`
`borderLeftColor`	OptionalDeprecated Use the `keyline` property instead. `("neutral" \| "critical") \| undefined`
`borderRightColor`	OptionalDeprecated Use the `keyline` property instead. `("neutral" \| "critical") \| undefined`
`borderTopColor`	OptionalDeprecated Use the `keyline` property instead. `("neutral" \| "critical") \| undefined`
`isolatedDependencies`	OptionalDeprecated `string[] \| undefined`
`layout`	OptionalDeprecated Use the `stack` property instead. `("column" \| "inline" \| "row" \| "inline-column" \| "inline-row") \| undefined`
`when`	OptionalDeprecated Use nested styles instead. `(string \| { pointer: "none" \| "coarse" \| "fine"; colorScheme: "dark" \| "light"; motion: "supported" \| "reduced"; hover: "none" \| "hover"; viewportWidth: "small" \| "medium" \| "large" \| "xlarge"; contrast: "more" \| "less"; }[] \| { pointer: "none" \| "coarse" \| "fine"; colorScheme: "dark" \| "light"; motion: "supported" \| "reduced"; hover: "none" \| "hover"; viewportWidth: "small" \| "medium" \| "large" \| "xlarge"; contrast: "more" \| "less"; }) \| undefined`

Emphasized text

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

Secondary text

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

Inline

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

Inline props

CSS

Emphasized text

Secondary text

See also