Version: Next

Inline

Render a set of components in a row with equal spacing between them. It also supports wrapping.

Usage

import { Inline } from '@vtex/admin-ui'

function Example() {
  return (
    <Inline>
      <Tag label="Brazil" />
      <Tag label="Argentina" />
      <Tag label="Chile" />
      <Tag label="Uruguai" />
    </Inline>
  )
}

Examples

Basic

Wrap

Wrapping is applied automatically.

Space

Space is configured using the vSpace and hSpace, with either token or number values. In the case of a numeric value, the unit is rem by default. You can also set the unit prop to change it.

Props

Name	Type	Description	Required	Default
vSpace	`VSpaceTokens`	Vertical space	🚫	'$s'
hSpace	`HSpaceTokens`	Horizontal space	🚫	'$s'
noWrap	`boolean`	Disabled wrap	🚫	`false`
align	`CSS.alignItems`	Items vertical alignment	🚫	'start'

Usage​

Examples​

Basic​

Wrap​

Space​

Props​