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

Brazil

Argentina

Chile

Uruguai

Wrap

Wrapping is applied automatically.

Brasil

Argentina

Chile

Uruguai

Colombia

Equador

Venezuela

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.

Brasil

Argentina

Chile

Uruguai

Colombia

Equador

Venezuela

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'