Flex

PreviousNext

Flexbox layout helper.

import { Flex, Button } from "@/rl-ui";

<Flex gap="2">
<Button variant="primary">Save</Button>
<Button variant="secondary">Cancel</Button>
</Flex>

Examples

Column & between

import { Flex, Badge } from "@/rl-ui";

<Flex direction="column" gap="3" align="start">
<Badge color="blue">One</Badge>
<Badge color="green">Two</Badge>
</Flex>

Justify between

import { Flex, Text, Button } from "@/rl-ui";

<Flex justify="between" align="center" className="w-full">
<Text variant="heading-03">Title</Text>
<Button size="small">Action</Button>
</Flex>

API

PropTypeDefaultDescription
direction"row" | "column" | "row-reverse" | "column-reverse"—Flex direction.
align"start" | "center" | "end" | "stretch" | "baseline"—Align items.
justify"start" | "center" | "end" | "between" | "around" | "evenly"—Justify content.
gapstring—Tailwind gap token (e.g. "2").
wrap"wrap" | "nowrap" | "wrap-reverse" | boolean—Flex wrap.
inlinebooleanfalseUse inline-flex.