Stack component is a layout component that stacks its children vertically or horizontally.

Default stack is using vertical direction with a gap of --dds-spacing-600 / 24px between its children.

<dap-ds-stack>
  <dap-ds-button>Button 1</dap-ds-button>
  <dap-ds-button>Button 2</dap-ds-button>
  <dap-ds-button>Button 3</dap-ds-button>
</dap-ds-stack>

You can set the direction to row or row-reverse to stack the children horizontally. Horizontal stack is using the gap of --dds-spacing-200 / 8px between its children.

<dap-ds-stack direction="row">
  <dap-ds-button>Button 1</dap-ds-button>
  <dap-ds-button>Button 2</dap-ds-button>
  <dap-ds-button>Button 3</dap-ds-button>
</dap-ds-stack>

You can set the spacing to a custom value to adjust the space between the children. Any dds-spacing- variable number can be used.

<dap-ds-stack direction="row" spacing="600">
  <dap-ds-button>Button 1</dap-ds-button>
  <dap-ds-button>Button 2</dap-ds-button>
  <dap-ds-button>Button 3</dap-ds-button>
</dap-ds-stack>

import { DapDSStack } from 'dap-design-system/dist/dds'

import { DapDSStackReact } from 'dap-design-system/dist/react'

No custom events available.

No CSS parts available.