Name	Description	Default
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

Flex

A layout container using flexbox.

usage: import { Flex, Inline, Stack } from "@sharegate/orbit-ui";
sources: Github

Usage

Flex layout offer a lot of options to solve a bunch of use cases. This page only showcase a few use cases. For a thorough documentation, please have a look at MDN.

Horizontal alignment

A flex layout can have horizontally aligned items.

Editable example

<Flex direction="row" gap={2}>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Flex><Flex direction="row" gap={2}>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Flex>

Vertical alignment

A flex layout can have vertically aligned items.

Editable example

<Flex direction="column" gap={2}>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Flex><Flex direction="column" gap={2}>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Flex>

Gap

A flex layout can have a gap between his items. columnGap and rowGap are also available to specify a gap for a single axis.

Editable example

<Flex direction="row" gap={2}>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Flex><Flex direction="row" gap={2}>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Flex>

Align items

A flex layout can align his items along the cross axis. When the direction is "column", this refers to horizontal alignment, and when direction is "row" it refers to vertical alignment.

Editable example

<Flex alignItems="center" direction="column" gap={2}>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Flex><Flex alignItems="center" direction="column" gap={2}>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Flex>

Justify content

A flex layout can align his items along the main axis. When direction is "column", this refers to vertical alignment, and when direction is "row" it refers to horizontal alignment.

Editable example

<Flex justifyContent="center" gap={2}>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Flex><Flex justifyContent="center" gap={2}>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Flex>

Wrap

A flex layout items can wrap on multiple rows.

Editable example

<Flex wrap="wrap" gap={1} width={18}>
    {ShareGateTheme.colors.common.accent.map(x => (
        <Div backgroundColor={x} width={6} height={6} key={x} />
    ))}
    {ShareGateTheme.colors.common.alert.map(x => (
        <Div backgroundColor={x} width={6} height={6} key={x} />
    ))}
    {ShareGateTheme.colors.common.green.map(x => (
        <Div backgroundColor={x} width={6} height={6} key={x} />
    ))}
</Flex><Flex wrap="wrap" gap={1} width={18}>
    {ShareGateTheme.colors.common.accent.map(x => (
        <Div backgroundColor={x} width={6} height={6} key={x} />
    ))}
    {ShareGateTheme.colors.common.alert.map(x => (
        <Div backgroundColor={x} width={6} height={6} key={x} />
    ))}
    {ShareGateTheme.colors.common.green.map(x => (
        <Div backgroundColor={x} width={6} height={6} key={x} />
    ))}
</Flex>

Reverse

A flex layout can reverse the items order.

Editable example

<Flex reverse gap={2}>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Flex><Flex reverse gap={2}>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Flex>

Nesting

Flex layouts can be nested.

Editable example

<Flex gap={4}>
    <Flex gap={2}>
        <Div backgroundColor="accent-5" width={9} height={9} />
        <Div backgroundColor="accent-5" width={9} height={9} />
    </Flex>
    <Flex direction="column" gap={2}>
        <Div backgroundColor="alert-5" width={9} height={9} />
        <Div backgroundColor="alert-5" width={9} height={9} />
    </Flex>
    <Flex gap={2}>
        <Div backgroundColor="green-5" width={9} height={9} />
        <Div backgroundColor="green-5" width={9} height={9} />
    </Flex>
</Flex><Flex gap={4}>
    <Flex gap={2}>
        <Div backgroundColor="accent-5" width={9} height={9} />
        <Div backgroundColor="accent-5" width={9} height={9} />
    </Flex>
    <Flex direction="column" gap={2}>
        <Div backgroundColor="alert-5" width={9} height={9} />
        <Div backgroundColor="alert-5" width={9} height={9} />
    </Flex>
    <Flex gap={2}>
        <Div backgroundColor="green-5" width={9} height={9} />
        <Div backgroundColor="green-5" width={9} height={9} />
    </Flex>
</Flex>

Inline

An inline utility component is available for horizontal alignment.

Editable example

<Inline>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Inline><Inline>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Inline>

Stack

A stack utility component is available for vertical alignment.

Editable example

<Stack>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Stack><Stack>
    <Div backgroundColor="accent-5" width={9} height={9} />
    <Div backgroundColor="alert-5" width={9} height={9} />
    <Div backgroundColor="green-5" width={9} height={9} />
</Stack>

API

Flex

usage: import { Flex } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name	Description	Default
alignContent	See MDN. "center" \| "end" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "space-around" \| "space-between" \| "space-evenly" \| "stretch" \| "flex-end" \| "flex-start" \| "start" \| "baseline" \| "normal" \| string & {} \| ResponsiveValue<AlignContent>	-
alignItems	See MDN. Omit<AlignItems, "flex-end" \| "flex-start"> \| ResponsiveValue<Omit<AlignItems, "flex-end" \| "flex-start">>	-
basis	Alias for flex basis; 0 \| "content" \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| string & {} \| "auto" \| "fit-content" \| "max-content" \| "min-content" \| "-moz-fit-content" \| "-moz-max-content" \| "-moz-min-content" \| "-webkit-auto" \| ResponsiveValue<FlexBasis<0 \| (string & {})>>	-
children*	React children. string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
columnGap	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "normal" \| string & {} \| 1 \| 13 \| 2 \| 3 \| 4 \| 6 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| ResponsiveValue<ColumnGapValue>	-
direction	Alias for flex-direction. "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "column" \| "column-reverse" \| "row" \| "row-reverse" \| ResponsiveValue<FlexDirection>	-
fluid	Whether the elements take up all the space of their container. false \| true \| ResponsiveValue<boolean>	-
gap	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "normal" \| string & {} \| 1 \| 13 \| 2 \| 3 \| 4 \| 6 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| ResponsiveValue<GapValue>	-
grow	See MDN. "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| string & {} \| number & {} \| ResponsiveValue<FlexGrow>	-
inline	Whether or not the element generate line breaks before or after himself. falsetrue	-
justifyContent	See MDN. Omit<JustifyContent, "flex-end" \| "flex-start"> \| ResponsiveValue<Omit<JustifyContent, "flex-end" \| "flex-start">>	-
reverse	Whether or not to reverse the order of the elements. falsetrue	-
rowGap	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "normal" \| string & {} \| 1 \| 13 \| 2 \| 3 \| 4 \| 6 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| ResponsiveValue<RowGapValue>	-
shrink	See MDN. "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| string & {} \| number & {} \| ResponsiveValue<FlexShrink>	-
slot	Slot to render into. string	-
wrap	Alias for flex-wrap. "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "nowrap" \| "wrap" \| "wrap-reverse" \| ResponsiveValue<FlexWrap>	-

Inline

usage: import { Inline } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name	Description	Default
alignX	The horizontal alignment of the elements. "center" \| "end" \| "start" \| ResponsiveValue<FlexAlignment>	-
alignY	The vertical alignment of the elements. "center" \| "end" \| "start" \| ResponsiveValue<FlexAlignment>	-
children*	React children string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
columnGap	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "normal" \| string & {} \| 1 \| 13 \| 2 \| 3 \| 4 \| 6 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| ResponsiveValue<ColumnGapValue>	-
fluid	Whether the elements take up all the space of their container. false \| true \| ResponsiveValue<boolean>	-
gap	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "normal" \| string & {} \| 1 \| 13 \| 2 \| 3 \| 4 \| 6 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| ResponsiveValue<GapValue>	5
inline	Whether or not the element generate line breaks before or after himself. falsetrue	-
reverse	Whether or not to reverse the order of the elements. falsetrue	-
rowGap	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "normal" \| string & {} \| 1 \| 13 \| 2 \| 3 \| 4 \| 6 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| ResponsiveValue<RowGapValue>	-
slot	Slot to render into. string	-
wrap	Whether or not to wrap the elements on multiple lines. false \| true \| ResponsiveValue<boolean>	true

Stack

usage: import { Stack } from "@sharegate/orbit-ui";
extends: Div
StyleProps

Name	Description	Default
alignX	The horizontal alignment of the elements. "center" \| "end" \| "start" \| ResponsiveValue<FlexAlignment>	-
alignY	The vertical alignment of the elements. "center" \| "end" \| "start" \| ResponsiveValue<FlexAlignment>	-
children*	React children string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| ReactFragment \| ReactPortal	-
columnGap	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "normal" \| string & {} \| 1 \| 13 \| 2 \| 3 \| 4 \| 6 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| ResponsiveValue<ColumnGapValue>	-
fluid	Whether the elements take up all the space of their container. false \| true \| ResponsiveValue<boolean>	-
gap	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "normal" \| string & {} \| 1 \| 13 \| 2 \| 3 \| 4 \| 6 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| ResponsiveValue<GapValue>	5
inline	Whether or not the element generate line breaks before or after himself. falsetrue	-
reverse	Whether or not to reverse the order of the elements. falsetrue	-
rowGap	See MDN. 0 \| "-moz-initial" \| "inherit" \| "initial" \| "revert" \| "revert-layer" \| "unset" \| "normal" \| string & {} \| 1 \| 13 \| 2 \| 3 \| 4 \| 6 \| 5 \| 7 \| 8 \| 9 \| 10 \| 11 \| 12 \| ResponsiveValue<RowGapValue>	-
slot	Slot to render into. string	-
wrap	Whether or not to wrap the elements on multiple lines. false \| true \| ResponsiveValue<boolean>	-

No Preview

Flex

Usage

Horizontal alignment

Vertical alignment

Gap

Align items

Justify content

Wrap

Reverse

Nesting

Inline

Stack

API

Flex

Inline

Stack