Summary
The Inline component currently does not expose a justifyContent prop for endpoint-alignment values, which limits horizontal alignment control when the component's items do not fill the full container width.
Motivation
The space prop already accepts 'between' | 'around' | 'evenly', covering the distributional justify-content values. What is not currently possible is pushing a group of items to the right or centre of the container — for example, placing a single action button flush-right in a card header:
// Not achievable today — no way to right-align the group
<Inline space={16} justifyContent="flex-end">
<Button variant="secondary">Cancel</Button>
<Button variant="primary">Save</Button>
</Inline>
This forces consumers to wrap Inline in an extra element with custom CSS, adding unnecessary complexity.
Proposed API
Add a justifyContent prop restricted to the values not already covered by space:
<Inline space={16} justifyContent="flex-end">
<Tag type="active">Active</Tag>
<Tag type="inactive">Inactive</Tag>
</Inline>
Suggested accepted values:
| Value |
Description |
"flex-start" (default) |
Items aligned to the start — current behaviour |
"flex-end" |
Items aligned to the end (right in LTR) |
"center" |
Items centred horizontally |
space-between, space-around, and space-evenly are already handled by the space prop and do not need to be duplicated here.
Acceptance criteria
Additional context
This request was raised while building a metrics dashboard that uses Inline to place action buttons flush-right in a card header. Without justifyContent: "flex-end", the layout requires an extra wrapper element.
Summary
The
Inlinecomponent currently does not expose ajustifyContentprop for endpoint-alignment values, which limits horizontal alignment control when the component's items do not fill the full container width.Motivation
The
spaceprop already accepts'between' | 'around' | 'evenly', covering the distributionaljustify-contentvalues. What is not currently possible is pushing a group of items to the right or centre of the container — for example, placing a single action button flush-right in a card header:This forces consumers to wrap
Inlinein an extra element with custom CSS, adding unnecessary complexity.Proposed API
Add a
justifyContentprop restricted to the values not already covered byspace:Suggested accepted values:
"flex-start"(default)"flex-end""center"Acceptance criteria
Inlineaccepts an optionaljustifyContentprop ("flex-start" | "flex-end" | "center")."flex-start").justify-contentCSS property."flex-start"and"flex-end").Additional context
This request was raised while building a metrics dashboard that uses
Inlineto place action buttons flush-right in a card header. WithoutjustifyContent: "flex-end", the layout requires an extra wrapper element.