Set (deprecated)

warning

Set is a deprecated component. You should use Stack instead. We have a codemod to help you with the migration.

Our design system comes with layout components to help you build common layouts inside your application. Set represents a group of components, it automatically spaces out its child components.

Import

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

Behavior

A <Set> can be used to list a set of components. It will automatically space out the components, and wrap them when they reach the width of the viewport.

<Set>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
  <Button>Button 4</Button>
  <Button>Button 5</Button>
</Set>

Variations

Spacing

The spacing between components can be controlled using the spacing property.

💡 Spacing consumes the 'space' values from the theme.

<Set spacing={5}>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
  <Button>Button 4</Button>
  <Button>Button 5</Button>
</Set>

Orientation

Orientation can be either vertical or horizontal (default). It can be controlled with the orientation property.

<Set orientation="vertical">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
  <Button>Button 4</Button>
  <Button>Button 5</Button>
</Set>

Fluid

While on vertical orientation, you can alternatively use the fluid property. This will make the inner children, match the container width.

<Box csx={{ maxWidth: 320 }}>
  <Set orientation="vertical" fluid>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
    <Button>Button 4</Button>
    <Button>Button 5</Button>
  </Set>
</Box>

Align

You can set items alignment (start [default], end) through the align prop.

<Set align="end">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
  <Button>Button 4</Button>
  <Button>Button 5</Button>
</Set>

Responsive Design

orientation, spacing and align are ResponsiveValues. It means that you can pass an array to them.

<Box csx={{ maxWidth: ['full', 'full', 560] }}>
  {' '}
  p<Set orientation={['vertical', 'vertical', 'horizontal']} fluid>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
    <Button>Button 4</Button>
    <Button>Button 5</Button>
  </Set>
</Box>

Customization

You can use the csx property to handle different styles.

<Set
  csx={{
    bg: 'muted',
    borderRadius: 'default',
    padding: 4,
  }}
>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
  <Button>Button 4</Button>
  <Button>Button 5</Button>
</Set>

Props

Besides the props listed bellow, you can use all the props accepted by the div JSX element.

Name	Type	Description	Required	Default
orientation	ResponsiveValue<'vertical', or 'horizontal'>	orientation of items	🚫	'vertical'
fluid	boolean	If the items should grow in width to match the container	🚫	false
spacing	ResponsiveValue<number>	Space between items	🚫	0
align	ResponsiveValue<'start', or 'end'>	Items alignment	🚫	start
csx	StyleProp	Defines component styles	🚫	{}