@agala-labs/ui

Stack

Arranges children with consistent direction, alignment, wrapping, and gap.

Examples

Default

<AgalaHStack gap="0.75rem" align="center"><AgalaButton>Save</AgalaButton><AgalaButton variant="ghost">Cancel</AgalaButton></AgalaHStack>

Import

import { AgalaStack, AgalaHStack, AgalaVStack } from '@agala-labs/ui'

API

Prop	Type	Default	Description
direction	'vertical' | 'horizontal'	'vertical'	Stack direction.
gap	string	—	CSS gap.
align / justify	string	—	CSS alignment values.
wrap	boolean	false	Allows wrapping.
as	string	'div'	Rendered HTML element.
class	string	—	Consumer override class.

Slots

• default

Accessibility

Choose an appropriate as element when the children form a semantic list or navigation region.