Space

Space is Box with display="inline-block". You can specify either width or height to add space between two elements.

Import

copy
import { Space } from '@trendmicro/react-styled-ui';
import { Space } from '@trendmicro/react-styled-ui';

Usage

Horizontal spacing

EDITABLE EXAMPLE
copy
<>
  <Button variant="ghost" width="8x" height="8x" borderRadius="circle">
    <Icon icon="add" />
  </Button>
  <Space width="2x" />
  <Button variant="ghost" borderRadius="2rem">
    <Icon icon="settings" />
    <Space width="2x" />
    Settings
  </Button>
</>
<>
  <Button variant="ghost" width="8x" height="8x" borderRadius="circle">
    <Icon icon="add" />
  </Button>
  <Space width="2x" />
  <Button variant="ghost" borderRadius="2rem">
    <Icon icon="settings" />
    <Space width="2x" />
    Settings
  </Button>
</>

Vertical spacing

EDITABLE EXAMPLE
copy
<Flex direction="column">
  <TextLabel>Text label</TextLabel>
  <Space height="2x" />
  <Input placeholder="Text input" />
  <Space height="1x" />
  <Text size="xs">Help text for the text input</Text>
</Flex>
<Flex direction="column">
  <TextLabel>Text label</TextLabel>
  <Space height="2x" />
  <Input placeholder="Text input" />
  <Space height="1x" />
  <Text size="xs">Help text for the text input</Text>
</Flex>