Flex

Flex lays its children out in a row (or a column) with flexbox. Use it for toolbars, a title with actions on the right, or a group of tags. For a plain vertical list of children, use Stack.

import { Flex } from '@beyul/sulmu-ui'

Source

Examples

Gap and alignment

gap takes a step of the spacing scale: one step is 4px, so gap={3} is 12px.

ActiveInternalInvite user

import { Button, Flex, Tag } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex gap={3} align="center">
      <Tag tone="green">Active</Tag>
      <Tag tone="blue">Internal</Tag>
      <Button size="sm">Invite user</Button>
    </Flex>
  )
}

Space between

A title on the left and an action on the right: the usual page or card header.

Users

Invite user

import { Button, Flex, Text } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex justify="between" align="center" style={{ maxWidth: 480 }}>
      <Text as="h3" textStyle="heading6">
        Users
      </Text>
      <Button size="sm">Invite user</Button>
    </Flex>
  )
}

Wrap

AdminSalesOperationsFinanceGuidesPartners

import { Flex, Tag } from '@beyul/sulmu-ui'

const teams = ['Admin', 'Sales', 'Operations', 'Finance', 'Guides', 'Partners']

export default function Example() {
  return (
    <Flex wrap gap={2} style={{ maxWidth: 240 }}>
      {teams.map((name) => (
        <Tag key={name}>{name}</Tag>
      ))}
    </Flex>
  )
}

Props

Prop	Type	Default	Description
as	ElementType	div	Element to render. Default: div.
direction	"row" | "column" | "rowReverse" | "columnReverse"	row	Main axis. Default: row.
align	"center" | "start" | "end" | "stretch" | "baseline"	-	Cross-axis alignment (align-items).
justify	"center" | "start" | "end" | "between" | "around" | "evenly"	-	Main-axis distribution (justify-content).
wrap	boolean	-	Let children wrap onto more lines.
inline	boolean	-	Render as inline-flex, so the container is only as wide as its children.
gap	0 | 1 | 2 | 3 | 0.5 | 1.5 | 2.5 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 20 | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "12" | "14" | "16" | "20"	-	Space between children, as a step of the spacing scale: 1 = 4px, 4 = 16px.

Flex also accepts every div attribute, including className and style.

Usage notes

• gap accepts these steps only: 0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 10, 12, 14, 16 and 20. Each one is a class in the precompiled stylesheet. For any other distance, use style.
• as changes the element (as="ul", as="section"); the ref and the remaining props go to it.
• inline makes the container inline-flex, so it is only as wide as its children.