Docs

Docs

Horizontal Layout

Horizontal Layout places components side-by-side in a row.

Horizontal Layout places components side-by-side in a row. By default, it defines its width and height automatically, determined by the components it contains (i.e., it “hugs” the content).

See Vertical Layout for placing components top-to-bottom.

Open in a
new tab
<HorizontalLayout theme="spacing padding">
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
</HorizontalLayout>

Components in a Horizontal Layout can be aligned horizontally, as you’d expect, but also vertically.

Vertical Alignment

You can position components at the top, middle, or bottom. You can also stretch items or position them along the text baseline in the layout.

Open in a
new tab
<HorizontalLayout
  theme="spacing padding"
  className="height-4xl"
  style={{ alignItems: 'center' }}
>
  <TextArea label="Text area 1" />
  <TextArea label="Text area 2" />
  <TextArea label="Text area 3" />
</HorizontalLayout>
Value Description

STRETCH (default)

Vertically stretches items that have undefined height.

START

Positions items at the top of the layout.

CENTER

Centers items, vertically.

END

Positions items at the bottom of the layout.

BASELINE

Positions items along the layout’s text baseline.

It’s also possible to set a different vertical alignment for individual items by overriding the general alignment setting of the layout.

Open in a
new tab
<HorizontalLayout
  theme="spacing padding"
  className="height-4xl"
  style={{ alignItems: 'stretch', ...layoutExampleStyle }}
>
  <TextArea label="Text area 1" style={{ alignSelf: 'start' }} />
  <TextArea label="Text area 2" />
  <TextArea label="Text area 3" style={{ alignSelf: 'end' }} />
</HorizontalLayout>

Horizontal Alignment

Components in a Horizontal Layout can be left-aligned, centered or right-aligned. You can also position components by specifying how the excess space in a layout is distributed among them.

Open in a
new tab
<HorizontalLayout
  theme="spacing padding"
  className="height-4xl"
  style={{ justifyContent: 'center' }}
>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
</HorizontalLayout>
Value Description

START (default)

Left-aligns for left-to-right language items. For right-to-left languages, right-aligns items.

CENTER

Centers items, horizontally.

END

Right-aligns for left-to-right language items. For right-to-left languages, left-aligns items.

BETWEEN

Available space is distributed evenly between items. No space is added before the first item, or after the last.

AROUND

Available space is distributed evenly around items. The space before the first item and after the last, is half of that between items.

EVENLY

Available space is distributed evenly between items. The space before the first item, between items, and after the last item is the same.

Spacing

Spacing is used to create space among components in the same layout. Spacing can help prevent misclicks and distinguish content areas.

Open in a
new tab
const [theme, setTheme] = useState('spacing');

return (
  <div>
    <HorizontalLayout theme={`${theme} padding`} style={{ alignItems: 'stretch' }}>
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </HorizontalLayout>

    <RadioGroup
      label="Spacing"
      value={theme}
      onValueChanged={(event) => {
        setTheme(event.detail.value);
      }}
    >
      <RadioButton value="spacing" label="Enabled" />
      <RadioButton value="" label="Disabled" />
    </RadioGroup>
  </div>
);

Five different spacing theme variants are available:

Open in a
new tab
<HorizontalLayout theme={`${themeVariant} padding`} style={{ alignItems: 'stretch' }}>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
</HorizontalLayout>
<RadioGroup
  label="Spacing variant"
  value={themeVariant}
  onValueChanged={(event) => setThemeVariant(event.detail.value)}
>
  <RadioButton value="spacing-xs" label="spacing-xs" />
  <RadioButton value="spacing-s" label="spacing-s" />
  <RadioButton value="spacing" label="spacing" />
  <RadioButton value="spacing-l" label="spacing-l" />
  <RadioButton value="spacing-xl" label="spacing-xl" />
</RadioGroup>
Theme Variant Usage Recommendation

spacing-xs

Extra-small space between items.

spacing-s

Small space between items.

spacing

Medium space between items.

spacing-l

Large space between items.

spacing-xl

Extra-large space between items.

 
<HorizontalLayout
  theme="spacing-xs padding">
</HorizontalLayout>

Padding

Padding is the space between the outer border and the content in a layout. Padding can help distinguish the content in a layout from its surrounding. Padding is applied using the padding theme variant.

Open in a
new tab
<HorizontalLayout theme={`${theme} spacing`} style={{ alignItems: 'stretch' }}>
  <Button>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
</HorizontalLayout>
<RadioGroup
  label="Padding"
  value={theme}
  onValueChanged={(event: RadioGroupValueChangedEvent) => {
    setTheme(event.detail.value);
  }}
>
  <RadioButton value="padding" label="Enabled" />
  <RadioButton value="" label="Disabled" />
</RadioGroup>

Margin

Use margin to create space around a layout.

Open in a
new tab
<div className="container">
  <HorizontalLayout theme={`${theme} spacing padding`} style={{ alignItems: 'stretch' }}>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
  </HorizontalLayout>
</div>

<RadioGroup
  label="Margin"
  value={theme}
  onValueChanged={(event) => {
    setTheme(event.detail.value);
  }}
>
  <RadioButton value="margin" label="Enabled" />
  <RadioButton value="" label="Disabled" />
</RadioGroup>

Expanding Items

Components can be made to expand and take up any excess space a layout may have.

Open in a
new tab
<HorizontalLayout theme="padding spacing">
  <Button style={{ flexGrow: size }}>Button 1</Button>
  <Button>Button 2</Button>
  <Button>Button 3</Button>
</HorizontalLayout>

<RadioGroup
  label="Item sizing"
  value={size}
  onValueChanged={(event) => setSize(event.detail.value)}
>
  <RadioButton value="0" label="Default size" />
  <RadioButton value="1" label="Expand" />
</RadioGroup>

When multiple components expand, they do so relative to each other. For example, having two items with expand ratios of 2 and 1 results in the first item taking up twice as much of the available space as the second item.