Stack is a horizontal and vertical flow component used to create space between components. It allows you to easily stack elements together with defined spacing between them. It can be set up either vertically or horizontally, and uses tokens for spacing.
Accessibility
By default, Stack has no accessibility concerns. While using Stack, it is up to you to manage the resulting
accessibility implications. You may want to consider how the stack affects readability due to ordering, and
the visual or content hierarchy of your page.
Examples
Vertical Stack
Elements within the stack are placed vertically with bottom spacing. This is achieved by setting
orientation="vertical". A spacing property is provided to let you to create space between each stacked element.
spacing will take any Spacing Token as its value.
<Stackorientation="vertical"spacing="space60">
<Card>
<Headingas="h3"variant="heading30">What's new at Twilio</Heading>
<Paragraph>Check out our newest product releases on the Twilio Changelog.</Paragraph>
<Paragraph>Dig into our API reference documentation and quickstarts. You're covered with everything from SDKs in your favorite languages to sample apps for web, iOS, and Android.</Paragraph>
<Buttonvariant="secondary">Explore the Docs</Button>
</Card>
</Stack>
Horizontal Stack
Elements within the stack are placed horizontally with right spacing. This is achieved by setting
orientation="horizontal". A spacing property is provided to let you to create space between each stacked element.
spacing will take any Spacing Token as its value.
<Stackorientation="horizontal"spacing="space60">
<Buttonvariant="primary">Save</Button>
<Buttonvariant="secondary">Cancel</Button>
<Anchorhref="#">Close Project</Anchor>
</Stack>
Responsive Stack
orientation is a responsive props. You can provide it an array of orientation
values to change the orientation based on the screen sizes supported by your theme.
73c596919#2269 Thanks @SiTaggart! - Fixed a regression with the compilation script that caused incompatible ESM module importing of JSON files.
3.0.1
Patch Changes
c867e3f48#2237 Thanks @SiTaggart! - Updated a build dependency (esbuild) which changes the output of our builds slightly, without materially changing anything about the code.
b7675915#1985 Thanks @TheSisb! - For debugging purposes we now ship a filename.debug.js unminified version of each component or library in Paste.
ed5c0a49c#1965 Thanks @shleewhite! - Upgrade Paste to use React 17 by default, but maintain React 16 support for consumers.
2.1.0
Minor Changes
5e46a5eb#1722 Thanks @zahnster! - [Stack] Enable stack and stack children to respect element customizations set on the customization provider. Stack and stack children now enable setting an element name on the underlying HTML element, and checks the emotion theme object to determine whether it should merge in custom styles to the ones set by the component author.
2.0.4
Patch Changes
45c24b01#1479 Thanks @TheSisb! - Fix a bug where null children to a Stack causes extra margin to be appended at the end.
2.0.3
Patch Changes
0eded1fd#1319 Thanks @SiTaggart! - Change internal dependencies to have minor range matching on version numbers
a12acb61#1158 Thanks @richbachman! - Pinned all twilio-paste package versions in order to keep them in sync with core when they are updated by changesets.