Installation
Section titled “Installation”- Package
@bigbang/ui- Import
import { Stack } from '@bigbang/ui';- Source
- Stack.tsx
- Storybook
- Stack · Playground
Stack is in the @bigbang/ui package. Installation and style files are the same as for Button; for details, see the Button code tab.
import { Stack } from '@bigbang/ui';
<Stack gap="md" separator> <span>First item</span> <span>Second item</span></Stack>;gap- Description
- Space between children, from the
space.*scale. Withseparator, the gap sits on both sides of each rule. - Type
SpaceToken- Default
'md'
align- Description
- Cross-axis alignment of the children.
- Type
'start' | 'center' | 'end' | 'stretch'- Default
'stretch'
separator- Description
- Draws a 1 px subtle rule between children, for settings lists and description groups.
- Type
boolean- Default
false
render- Description
- Renders another element, such as
<ul>or<section>. Defaults to a<div>. - Type
ReactElement | ComponentRenderFn<HTMLProps, {}>
className- Description
- For layout only: width, grid placement, margins. Do not use it to change the gap or the direction.
- Type
string
children- Description
- The children, in reading order.
- Type
ReactNode
Native <div> attributes (id, role, aria-*, data-*, style) are passed through. ref is attached to the rendered element.
Data attributes
Section titled “Data attributes”data-component="stack": on the root element.