Hopper

Inline

An inline component is a layout primitive used to arrange elements horizontally.

View sourceView on npmReport an issue
AI Tip Want to skip the docs? Use the MCP Server

Usage

Reverse

The order and direction of inline items can be reversed.

Align X

Inline items can be aligned on the horizontal axis.

Align Y

Inline items can be aligned on the vertical axis.

Best Practices

Inline is a specialized layout component for arranging items horizontally with consistent spacing and vertical alignment. It's a preset of Flex with direction="row" and alignItems="center", designed for common horizontal layouts like button groups, icon-label pairs, and navigation items.

Inline should:

  • Be used for simple horizontal layouts where items should be vertically centered.
  • Use Hopper space tokens for the gap property to ensure consistency.
  • Be the default choice for horizontal layouts unless you need custom alignment or other flex properties.
  • Keep layouts simple and semantic without unnecessary wrapper elements.

Do's and Don'ts

Do
Use Inline for simple horizontal layouts with centered items
Don't
Use Flex with direction='row' and alignItems='center' when Inline is sufficient
Do
Use `alignY` to adjust vertical alignment of items
Don't
Use `alignItems` which is not supported by `Inline`
Do
Use `alignX` to adjust horizontal alignment of items
Don't
Use `justifyContent` which is not supported by `Inline`

Props

reverse?

Whether or not to reverse the order of the elements.

alignX?

An alias for the css justify-content property.

alignY?

An alias for the css align-items property.

style?
className?
wrap?

Whether to wrap the flex items. The value can also be a boolean.

basis?

An alias for the css flex-basis property.

grow?

An alias for the css flex-grow property.

shrink?

An alias for the css flex-shrink property.

inline?

Whether to display the flex container as an inline element.

Migration Notes

Coming from Orbiter, you should be aware of the following change:

  • The default gap value has been reduced to 1rem / var(--hop-space-inline-md) from 1.25rem. Use UNSAFE_gap="1.25rem" as a temporary measure during the migration to the Hopper design system. This value should eventually be removed to align with the new design standards.