Flex

Component for flexbox

Anatomy

Import and assemble the component:

1import { Flex } from "@raystack/apsara";
2

3<Flex />

API Reference

Renders a flex container for layout.

Prop

Type

Examples

Basic Usage

1<Flex gap="large">
2  <Flex gap="medium" direction="column">
3    <Button>Primary button</Button>
4    <Button>Primary button</Button>
5    <Button>Primary button</Button>
6  </Flex>
7  <Flex gap="medium" direction="column">
8    <Button>Primary button</Button>
9    <Button>Primary button</Button>
10    <Button>Primary button</Button>
11  </Flex>
12</Flex>

Accessibility

  • Uses semantic HTML for proper document structure
  • Supports standard content accessibility patterns