This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Inline

Version: 0.133.0

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

Loading...

Wrap

Wrapping is applied automatically.

Loading...

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.

Loading...

Props

NameTypeDescriptionRequiredDefault
vSpaceVSpaceTokensVertical space🚫'$s'
hSpaceHSpaceTokensHorizontal space🚫'$s'
noWrapbooleanDisabled wrap🚫false
alignCSS.alignItemsItems vertical alignment🚫'start'