Props

HStack takes every Stack prop except direction, which is fixed to horizontal.

Prop	Type	Default	Description
align	StackCrossAlignment	—	Vertical alignment alias, so the prop reads the same as on Stack. Same as vAlign.
as	string | Component	'div'	Element or component rendered at the root.
gap	SpacingStep	—	Space between adjacent items, using the spacing scale.
height	number | string	—	Height of the row. Numbers are pixels, strings are used as they are.
hAlign	StackMainAlignment	—	Horizontal main-axis alignment of the items: start, center, end, between, around, or evenly.
isScrollable	boolean	false	Enables scrollable overflow.
justify	StackMainAlignment	—	Main-axis alignment alias. Mirrors CSS justify-content.
maxWidth	number | string	—	Maximum width of the row.
minHeight	number | string	—	Minimum height of the row.
padding	SpacingStep	—	Padding on both axes, using the spacing scale.
paddingBlock	SpacingStep	—	Block-axis padding. Overrides padding on this axis.
paddingBlockEnd	SpacingStep	—	Bottom padding. Overrides paddingBlock and padding on that edge only.
paddingBlockStart	SpacingStep	—	Top padding. Overrides paddingBlock and padding on that edge only.
paddingInline	SpacingStep	—	Inline-axis padding. Overrides padding on this axis.
paddingInlineEnd	SpacingStep	—	Inline-end padding (right in LTR). Overrides paddingInline and padding on that edge only.
paddingInlineStart	SpacingStep	—	Inline-start padding (left in LTR). Overrides paddingInline and padding on that edge only.
vAlign	StackCrossAlignment	—	Vertical cross-axis alignment of the items: start, center, end, or stretch.
width	number | string	—	Width of the row. Numbers are pixels, strings are used as they are.
wrap	StackWrap	'nowrap'	Whether the items wrap onto another line: nowrap, wrap, or wrap-reverse.

The helper types are shared with Stack:

type SpacingStep = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10
type StackMainAlignment = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
type StackCrossAlignment = 'start' | 'center' | 'end' | 'stretch'
type StackWrap = 'nowrap' | 'wrap' | 'wrap-reverse'
type StackSizeValue = number | string
type StackElement = Component | string

Slots

• default: the items in the row.

Native attributes

The root element receives HTML attributes, aria-* attributes, data-* attributes, class, and style. class is merged with the component's own classes and style is merged with the sizing and spacing it already writes.