Space

Add horizontal or vertical spacing between elements using theme spacing values.

Import


import { Space } from '@tidbcloud/uikit'

Basic Usage

Vertical Spacing


import { Text, Space } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <>
      <Text>First line</Text>
      <Space h="md" />
      <Text>Second line</Text>
    </>
  )
}

Horizontal Spacing


import { Text, Space } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <div style={{ display: 'flex' }}>
      <Text>First</Text>
      <Space w="md" />
      <Text>Second</Text>
    </div>
  )
}

When to Use

Use Space when working with regular HTML elements that don’t have access to margin props:


import { Space } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <>
      <div>First line</div>
      <Space h="md" />
      <div>Second line</div>
    </>
  )
}

For Mantine components, prefer using margin props instead:


import { Text } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <>
      <Text>First line</Text>
      <Text mt="md">Second line</Text>
    </>
  )
}

Key Props

Prop	Type	Description
w	MantineSpacing	Horizontal space width
h	MantineSpacing	Vertical space height