Space

Set consistent spacing between components.

When to use

Use Space for equal horizontal or vertical gaps, wrapping, separators, and compact control groups.

Examples

Basic Usage

Crowded components horizontal spacing.

Vertical Space

Crowded components vertical spacing.

Space Size

Use size to set the spacing. Three sizes are preset: small, medium, large. You can also customize the spacing. If size is not set, the spacing is small.

Align

Config item align.

Wrap

Auto wrap line.

separator

Crowded components separator.

Compact Mode for form component

Compact Mode for form component.

Button Compact Mode

Button component compact example.

Vertical Compact Mode

Vertical Mode for Space.Compact, support Button only.

Custom semantic dom styling

You can customize the semantic dom style of Space by passing objects/functions through classNames and styles.

API

Space, Space.Compact, and their props are exported from @ceebee/ui/client.

Space

Property	Description	Type	Default	Version
`align`	Align items	`start \| end \|center \|baseline`	`-`	4.2.0
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props: SpaceProps })=> Record<SemanticDOM, string>`	`-`	—
`direction`	The space direction	`vertical \| horizontal`	`horizontal`	4.1.0
`orientation`	The space direction	`vertical \| horizontal`	`horizontal`	—
`size`	The space size	`Size \| [Size\[\]](#size)`	`small`	4.1.0 \| Array: 4.9.0
`split`	Set split, please use separator instead	`ReactNode`	`-`	4.7.0
`separator`	Set separator	`ReactNode`	`-`	-
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props: SpaceProps })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`vertical`	Orientation, Simultaneously configure with orientation and prioritize orientation	`boolean`	`false`	-
`wrap`	Auto wrap line, when horizontal effective	`boolean`	`false`	4.9.0

Space.Compact

Property	Description	Type	Default	Version
`block`	Option to fit width to its parent\'s width	`boolean`	`false`	4.24.0
`direction`	Set direction of layout	`vertical \| horizontal`	`horizontal`	4.24.0
`orientation`	Set direction of layout	`vertical \| horizontal`	`horizontal`	—
`vertical`	Orientation, Simultaneously configure with orientation and prioritize orientation	`boolean`	`false`	-
`size`	Set child component size	`large \| medium \| small`	`medium`	4.24.0

Space.Addon

Property	Description	Type	Default	Version
`children`	Custom content	`ReactNode`	`-`	5.29.0