Space

Use the Space component to insert fixed spacing between elements when margin props are not available or would make layouts harder to reason about.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽²⁾

Properties

⁽⁵⁾

Vertical spacing

Compare token-based and numeric vertical gaps between stacked content blocks.

Loading demo…

import
 
{
 
Block
,
 
Space
,
 
Text
,
 useTheme 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
EXAMPLES
 
=
 
[
  
{
    label
:
 
'Token spacing (md)'
,
    gap
:
 
'md'
 as 
const
,
    helper
:
 
'Use theme tokens for consistent rhythm between related content.'
  
}
,
  
{
    label
:
 
'Token spacing (xl)'
,
    gap
:
 
'xl'
 as 
const
,
    helper
:
 
'Larger tokens create breathing room for grouped sections.'
  
}
,
  
{
    label
:
 
'Numeric spacing (24px)'
,
    gap
:
 
24
,
    helper
:
 
'Fallback to numeric values when a token does not fit the layout.'
  
}
]
 as 
const
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 theme 
=
 
useTheme
(
)
;
 
  
return
 
(
    
<Block
>
      
{
EXAMPLES
.
map
(
(
{
 label
,
 gap
,
 helper 
}
)
 
=>
 
(
        
<Block
 
key
=
{
label
}
>
          
<Text
 
weight
=
"medium"
>
{
label
}
</Text
>
          
<Block
 
bg
=
{
theme
.
backgrounds
.
subtle
}
 
radius
=
"lg"
 
p
=
"md"
>
            
<Block
>
              
<Text
>
First
 line
</Text
>
              
<Space
 
h
=
{
gap
}
 
/>
              
<Text
>
Second
 line
</Text
>
            
</Block
>
          
</Block
>
          
<Text
 
variant
=
"small"
 
color
=
"muted"
>
            
{
helper
}
          
</Text
>
        
</Block
>
      
)
)
}
    
</Block
>
  
)
;
}

Horizontal spacing

Use Space to control gutters between inline buttons with tokens or fixed widths.

Loading demo…

import
 
{
 
Block
,
 
Button
,
 
Row
,
 
Space
,
 
Text
,
 useTheme 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
GROUPS
 
=
 
[
  
{
    label
:
 
'Token spacing (lg)'
,
    gap
:
 
'lg'
 as 
const
,
    helper
:
 
'Theme tokens keep button gutters aligned with the spacing scale.'
  
}
,
  
{
    label
:
 
'Numeric spacing (18px)'
,
    gap
:
 
18
,
    helper
:
 
'Use a numeric width when exact measurements are required.'
  
}
]
 as 
const
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 theme 
=
 
useTheme
(
)
;
 
  
return
 
(
    
<Block
>
      
{
GROUPS
.
map
(
(
{
 label
,
 gap
,
 helper 
}
)
 
=>
 
(
        
<Block
 
key
=
{
label
}
>
          
<Text
 
weight
=
"medium"
>
{
label
}
</Text
>
          
<Block
 
bg
=
{
theme
.
backgrounds
.
surface
}
 
radius
=
"lg"
 
p
=
"md"
>
            
<Row
 
align
=
"center"
>
              
<Button
 
size
=
"sm"
>
Primary
</Button
>
              
<Space
 
w
=
{
gap
}
 
/>
              
<Button
 
size
=
"sm"
 
variant
=
"secondary"
>
                
Secondary
              
</Button
>
              
<Space
 
w
=
{
gap
}
 
/>
              
<Button
 
size
=
"sm"
 
variant
=
"ghost"
>
                
Ghost
              
</Button
>
            
</Row
>
          
</Block
>
          
<Text
 
variant
=
"small"
 
color
=
"muted"
>
            
{
helper
}
          
</Text
>
        
</Block
>
      
)
)
}
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Space

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap