Inline

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

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?
id?
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.

Examples

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.

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.