## Inline Component

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

### SDK Version

8.x, 9.x

### Usage

To add the `Inline` component to your app:

```javascript
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](https://stripe.com/docs/stripe-apps/components/box).

#### Example

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

### Props

| Property | Type | Description |
|---|---|---|
| `children` | `React.ReactNode` | The contents of the component. |
| `css` | `CSS` | Related types: `CSS.CSSPropertyType` | Allows for custom styling of the component. |
| `alignSelfX` | `"start" | "center" | "end" | "stretch"` | Horizontal alignment. See [Layout properties](https://stripe.com/docs/stripe-apps/style#layout-properties) for details. |
| `alignSelfY` | `"top" | "center" | "baseline" | "bottom" | "stretch"` | Vertical alignment. See [Layout properties](https://stripe.com/docs/stripe-apps/style#layout-properties) for details. |
| `alignX` | `"start" | "center" | "end" | "stretch"` | Horizontal alignment. See [Layout properties](https://stripe.com/docs/stripe-apps/style#layout-properties) for details. |
| `alignY` | `"top" | "center" | "baseline" | "bottom" | "stretch"` | Vertical alignment. See [Layout properties](https://stripe.com/docs/stripe-apps/style#layout-properties) for details. |
| `backgroundColor` | `"container" | "surface"` | Sets the background color of the component. |