Skip to content

Global Properties

These properties are available in many other components and elements.

PropertiesDescription
space(optional) Has to be an object with either: top, right, bottom or left. Use spacing values like: small, 1rem, 1 or , 16px.
top(optional) Use spacing values like: small, 1rem, 1 or , 16px. Will use margin-top.
right(optional) Use spacing values like: small, 1rem, 1 or , 16px. will use margin-right.
bottom(optional) Use spacing values like: small, 1rem, 1 or , 16px. will use margin-bottom.
left(optional) Use spacing values like: small, 1rem, 1 or , 16px. will use margin-left.

Component Properties

PropertiesDescription
element(optional) defines the HTML element used. Defaults to div.
stretch(optional) if set to true, then the space element will be 100% in width.
inline(optional) if set to true, then display: inline-block; is used, so the HTML elements get aligned horizontally. Defaults to false.
innerSpace(optional) Will add a padding around the content. Supports also media query breakpoints like {small: { top: 'medium' }}.
no_collapse(optional) if set to true, then a wrapper with display: flow-root; is used. This way you avoid Margin Collapsing. Defaults to false. Note: You can't use inline={true} in combination.

Zero

Use either 0 or false (as a number/boolean or string) to set a margin of 0.

Provider

Also, Provider is supporting the collapse property.

Code Editor
<Provider
  space={{
    no_collapse: true,
  }}
>
  <Space>I do not collapse</Space>
  <Space>I do not collapse</Space>
</Provider>