Skip to main content

Stack

A layout component for stacking elements.

  • Use Stack.Horizontal to stack horizontally.
  • Use Stack.Vertical to stack vertically.
  • Use gutter prop to specify spacing between elements.
function Stack(props: {
// align-items for elements
align?: CSSProperties['alignItems'];
// justify-content for elements
justify?: CSSProperties['justifyContent'];
// flex-direction for elements
// (e.g.: row, column)
direction?: CSSProperties['flexDirection'];
// Space between elements
// @default 24
gutter?: number;
}): JSX.Element;
const Stack.Vertical: Stack;
const Stack.Horizontal: Stack;

Examples

/** @jsxImportSource @emotion/react */
import { Stack } from '@toss/emotion-utils';

export default function App() {
  return (
    <Stack.Horizontal gutter={16}>
      <button>
        Button
      </button>
      <button>
        Button
      </button>
      <button>
        Button
      </button>
    </Stack.Horizontal>
  );
}

/** @jsxImportSource @emotion/react */
import { Stack } from '@toss/emotion-utils';

export default function App() {
  return (
    <Stack gutter={16} direction="vertical">
      <button>
        Button
      </button>
      <button>
        Button
      </button>
      <button>
        Button
      </button>
    </Stack>
  );
}

function ComponentA() {
return (
<Stack gutter={2} direction="horizontal" align="center">
<Txt color={adaptive.grey800} typography="st8" fontWeight="semibold" textAlign="center">
{content}
</Txt>
<Foo />
</Stack>
);
}

function ComponentB() {
return (
<Stack.Vertical gutter={40}>
<Foo />
<Bar />
</Stack.Vertical>
);
}

function ComponentC() {
return (
<Stack.Horizontal gutter={20}>
<Foo />
<Bar />
</Stack.Horizontal>
);
}