Space

A layout container with even horizontal/vertical spacing.

Horizontal

Horizontal spacing

ButtonButtonButton

Example

Vertical

Vertical spacing

Tag 1Tag 2Tag 3

Example

Size & wrapping

size supports five tiers: xs (4px) / small (8px) / medium (12px, default) / large (24px) / xl (32px), or a numeric pixel value; invalid values fall back to medium with a warning.

Five spacing tiers

xs 4pxTagTagsmall 8pxTagTagmedium 12pxTagTaglarge 24pxTagTagxl 32pxTagTag

Example

Large spacing & wrapping

Button 1Button 2Button 3Button 4Button 5

Example

size also accepts a comma-separated pair (e.g. size="8,16"): the first value is the horizontal spacing, the second is the vertical spacing, which takes effect when wrap wraps items onto new lines.

size pair (horizontal / vertical)

Button 1Button 2Button 3Button 4Button 5Button 6

Example

Alignment

Cross-axis alignment

startButtoncenterButton

Example

Separator

separator inserts a separator symbol between items (secondary text color); slot="separator" provides custom separator content that takes priority over the string (e.g. a vertical divider).

String separator

TagTagTagEditCopyDelete

Example

Custom separator (slot=separator)

EditCopyDelete

Example

Distribution

justify controls main-axis distribution: start / center / end / space-between / space-around / space-evenly; when unset items keep their default start position.

justify distribution

space-betweenflush both endsTagcentercenteredspace-aroundequal sidesTagendflush right

Example

Reverse order

reverse flips the main axis: horizontal → row-reverse (right to left), vertical → column-reverse (bottom to top).

reverse

OneTwoThreeTag 1Tag 2Tag 3

Example

Fill items

fill makes items grow equally to fill the container (the flex: 1 equivalent); fill-ratio (percent, default 100) distributes space proportionally — items can set it individually, and the container-level fill-ratio acts as the default.

fill

OneTwoThreeOneTwo (200%)Three

Example

Spring spacer

oas-space is itself a flex container, so placing an empty element with style="flex: 1" between items acts as a spring (spacer): it absorbs the remaining space and pushes the following items to the other end — e.g. a "title on the left + action group on the right" page header or toolbar, with no new attribute needed. To make all items stretch proportionally instead, use fill / fill-ratio (see "Fill items").

Spring spacer

Page title

SettingsSaveIn progress

MoreSubmit

Example

Inline embedding

oas-space is a block-level flex container by default; to embed it inside a paragraph of text, add style="display: inline-flex" on the host — inline display is a host CSS concern, not a component attribute.

Inline in a paragraph

A paragraph with Tag 1Tag 2 tags on the same line, evenly spaced.

Example

Responsive

direction and size support a breakpoint shorthand: a space-separated base value plus any number of breakpoint:value pairs (e.g. direction="column md:row", size="small md:large"). Below the breakpoint width the base value applies; once the width reaches a breakpoint (mobile-first min-width) the breakpoint value kicks in.

Breakpoint table:

Breakpoint	Width
sm	640px
md	768px
lg	1024px
xl	1280px

Responsive direction: column on narrow, row from md

Button 1Button 2Button 3

Example

Responsive size: small, then large from md

Button 1Button 2Button 3Button 4Button 5

Example

Compact group (oas-compact)

oas-compact merges adjacent form controls (oas-button / oas-input / oas-input-number / oas-select): adjacent edges overlap by -1px to share borders, first/last items keep rounded corners while middle ones are squared; supports vertical (vertical grouping), disabled (disable the whole group) and block (width 100%).

input + button

Search

Example

select + button

Filter

Example

Vertical group

TopMiddleBottom

Example

block & disabled

SubscribeButton

Example

API

oas-space

Attribute	Description	Type	Default
align	Alignment	string	—
direction	Direction; supports breakpoint shorthand: a space-separated base value plus any breakpoint:value pairs (e.g. column md:row), breakpoints sm=640px / md=768px / lg=1024px / xl=1280px (mobile-first min-width), base value applies below the breakpoint	SpaceDirection	horizontal
fill	Make items grow equally to fill the container (the flex: 1 equivalent)	boolean	—
fill-ratio	Ratio for fill distribution (percent, default 100): items can set it individually, container-level acts as default	string	—
justify	Main-axis distribution: start / center / end / space-between / space-around / space-evenly (unset by default)	string	—
reverse	Reverse the main axis: horizontal → row-reverse, vertical → column-reverse	boolean	—
separator	Separator string between items (secondary text color); slot="separator" custom content takes priority	string	—
size	Spacing: xs (4px) / small (8px) / medium (12px, default) / large (24px) / xl (32px), or a numeric pixel value; a comma-separated pair (e.g. 8,16) controls horizontal/vertical spacing separately; supports breakpoint shorthand (e.g. small md:large, breakpoints as in direction); invalid values fall back to medium with a warning	string	medium
wrap	Whether to wrap	boolean	—

Name	Description
default	Items
separator	Custom separator content (e.g. <oas-divider direction="vertical">), takes priority over the separator string

oas-compact

Attribute	Description	Type	Default
aria-label	—	boolean	—
block	Width 100% (stretch to fill the parent container)	—	—
disabled	Disable the whole group	boolean	—
vertical	Vertical grouping (adjacent items overlap -1px vertically, corner merging switches to top/bottom)	boolean	—

Name	Description
default	Adjacent form controls (oas-button / oas-input / oas-input-number / oas-select)