Skip to contentSkip to navigationSkip to topbar
Figma
Star

Stack

A horizontal and vertical flow component used to create space between components.

Version 8.1.0
Github
Component preview theme
<Stack orientation="horizontal" spacing="space60">
<Box size="sizeSquare150" backgroundColor="colorBackgroundStrong" />
<Box size="sizeSquare150" backgroundColor="colorBackgroundStrong" />
<Box size="sizeSquare150" backgroundColor="colorBackgroundStrong" />
</Stack>

Guidelines

Guidelines page anchor

About Stack

About Stack page anchor

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

Accessibility page anchor

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.

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.

Component preview theme
<Stack orientation="vertical" spacing="space60">
<Card>
<Heading as="h3" variant="heading30">What's new at Twilio</Heading>
<Paragraph>Check out our newest product releases on the Twilio Changelog.</Paragraph>
<Button variant="primary">Changelog</Button>
</Card>
<Card>
<Heading as="h3" variant="heading30">Twilio Docs</Heading>
<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>
<Button variant="secondary">Explore the Docs</Button>
</Card>
</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.

Component preview theme
<Stack orientation="horizontal" spacing="space60">
<Button variant="primary">Save</Button>
<Button variant="secondary">Cancel</Button>
<Anchor href="#">Close Project</Anchor>
</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.

Component preview theme
<Stack orientation={['vertical', 'vertical', 'horizontal']} spacing="space60">
<Card>
<Heading as="h3" variant="heading30">1. Create a bot</Heading>
<Label htmlFor="unique_name" required>Unique Name</Label>
<Input id="unique_name" name="unique_name" type="text" placeholder="Your bot name" onChange={() => {}} />
</Card>
<Card>
<Heading as="h3" variant="heading30">2. Copy messaging URL</Heading>
<Label htmlFor="messaging_url" required>Messaging URL</Label>
<Input id="messaging_url" name="messaging_url" type="text" value="https://channel.autopilot.twilio.com..." onChange={() => {}} readOnly />
</Card>
</Stack>