Last updated Aug 23, 2023

This section describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

Inline

To add the Inline component to your app:

1
2
import ForgeUI, { Inline } from '@forge/react';

Description

Inline is a primitive component based on the React Native Flexbox layout model. This component provides the ability to lay out its direct children horizontally.

Props

Sure, here's the table sorted alphabetically by the Name column:

Name	Type	Required	Description
`alignBlock`	`string`	No	Aligns children vertically. Valid values are: `start` `center` `end` `baseline` `stretch` Defaults to `start`.
`alignInline`	`string`	No	Aligns children horizontally. Valid values are: `start` `center` `end` Defaults to `start`.
`grow`	`string`	No	Sets whether the container should grow to fill the available space. Valid values are: `hug` to use space only as required by its children `fill`to take all space provided by the parent element. Defaults to `hug`.
`rowSpace`	`string`	No	Represents the space between rows when content wraps. Used to override the space value in between rows.Valid values are Space tokens: `space.0` `space.025` `space.050` `space.075` `space.100` `space.150` `space.200` `space.250` `space.300` `space.400` `space.500` `space.600` `space.800` `space.1000`
`shouldWrap`	`boolean`	No	Sets whether children are forced onto one line or will wrap onto multiple lines. Defaults to `false`.
`space`	`string`	No	Represents the space between each child.Valid values are Space tokens: `space.0` `space.025` `space.050` `space.075` `space.100` `space.150` `space.200` `space.250` `space.300` `space.400` `space.500` `space.600` `space.800` `space.1000`
`spread`	`string`	No	Distributes its children along the horizontal axis. Overrides the `alignInline` property. Valid value is: `space-between`

Examples

Alignment

To control the alignment of items you can use the alignBlock and alignInline props which control alignment in the vertical and horizontal axis respectively.

Align block

Use to align children vertically.

Rendered tags using the alignBlock property with an inline component. The tags are displayed vertically, with equal spacing between them.

1
2

import { Inline, Stack, Text, Tag, Button, Image } from '@forge/react';

export const InlineAlignBlock = () => {
 return (
   <Inline space="space.400">
     <Stack space="space.200">
       <Text>Start (Default)</Text>
       <Inline alignBlock="start" space="space.050">
         <Image src="https://examplecat.png" size="small" />
         <Tag color="blue-light">1</Tag>
         <Tag color="purple-light">2</Tag>
         <Tag color="red-light">3</Tag>
       </Inline>
     </Stack>
     <Stack space="space.200">
       <Text>Center</Text>
       <Inline alignBlock="center" space="space.050">
         <Image src="https://examplecat.png" size="small" />
         <Tag color="blue-light">1</Tag>
         <Tag color="purple-light">2</Tag>
         <Tag color="red-light">3</Tag>
       </Inline>
     </Stack>
     <Stack space="space.200">
       <Text>End</Text>
       <Inline alignBlock="end" space="space.050">
         <Image src="https://examplecat.png" size="small" />
         <Tag color="blue-light">1</Tag>
         <Tag color="purple-light">2</Tag>
         <Tag color="red-light">3</Tag>
       </Inline>
     </Stack>
     <Stack space="space.200">
       <Text>Baseline</Text>
       <Inline alignBlock="baseline" space="space.050">
         <Button
           onClick={() => console.log('Add Image button')}
           appearance="primary"
         >
           Add Image
         </Button>
         <Tag color="blue-light">1</Tag>
         <Tag color="purple-light">2</Tag>
         <Tag color="red-light">3</Tag>
       </Inline>
     </Stack>
   </Inline>
 );
};

Align inline

Use to align children horizontally.

Rendered tags using the alignInline property with an inline component. The tags are displayed horizontally, with equal spacing between them.

1
2
import { Stack, Text, Inline, Tag } from '@forge/react';

export const InlineAlignInline = () => {
  return (
    <Stack space="space.400">
      <Stack space="space.200">
        <Text>Start (default)</Text>
        <Inline space="space.050" alignInline="start">
          <Tag color="blue-light">1</Tag>
          <Tag color="purple-light">2</Tag>
          <Tag color="red-light">3</Tag>
        </Inline>
      </Stack>
      <Stack space="space.200">
        <Text>Center</Text>
        <Inline space="space.050" alignInline="center">
          <Tag color="blue-light">1</Tag>
          <Tag color="purple-light">2</Tag>
          <Tag color="red-light">3</Tag>
        </Inline>
      </Stack>
      <Stack space="space.200">
        <Text>End</Text>
        <Inline space="space.050" alignInline="end">
          <Tag color="blue-light">1</Tag>
          <Tag color="purple-light">2</Tag>
          <Tag color="red-light">3</Tag>
        </Inline>
      </Stack>
    </Stack>
  );
};

Grow

Use to set whether the container should grow to fill the available space.

Rendered tag components with adjustable growth behavior using the grow property

1
2
import { Inline, Stack, Text, Tag } from '@forge/react';

export const InlineGrow = () => {
  return (
    <Inline grow="fill" space="space.400">
      <Stack space="space.200">
        <Text>Hug</Text>
        <Inline grow="hug" alignInline="start" space="space.050">
          <Tag color="blue-light">1</Tag>
          <Tag color="purple-light">2</Tag>
          <Tag color="red-light">3</Tag>
        </Inline>
      </Stack>
      <Stack space="space.200">
        <Text>Fill</Text>
        <Inline grow="fill" alignInline="start" space="space.050">
          <Tag color="blue-light">1</Tag>
          <Tag color="purple-light">2</Tag>
          <Tag color="red-light">3</Tag>
        </Inline>
      </Stack>
    </Inline>
  );
};

Row space

Use to represent the space between rows when content wraps.

For a different space value between rows use the rowSpace prop.

Rendered tags with and without row spacing for wrapping content

1
2
import { Stack, Text, Inline, Tag } from '@forge/react';

export const InlineRowSpace = () => {
  // In this example, instead of creating 20 components manually
  // we are initiating an array with 20 elements with their "key"
  // as the value and mapping each one of them to a `Tag` component
  return (
    <Stack space="space.600">
      <Stack space="space.200">
        <Text>With row space</Text>
        <Inline space="space.100" shouldWrap={true} rowSpace={'space.300'}>
          {[...Array(20).keys()].map((i) => (
            <Tag color={tagColor[i % tagColor.length]}>{`${i + 1}`}</Tag>
          ))}
        </Inline>
      </Stack>
      <Stack space="space.200">
        <Text>Without row space (default)</Text>
        <Inline space="space.100" shouldWrap={true}>
          {[...Array(20).keys()].map((i) => (
            <Tag color={tagColor[i % tagColor.length]}>{`${i + 1}`}</Tag>
          ))}
        </Inline>
      </Stack>
    </Stack>
  );
};

Should wrap

Use to set whether children are forced onto one line or will wrap onto multiple lines.

Rendered tags with adjustable wrapping behavior.

1
2
import { Inline, Tag} from '@forge/react';

export const InlineShouldWrap = () => {
  // In this example, instead of creating 20 components manually
  // we are initiating an array with 20 elements with their "key"
  // as the value and mapping each one of them 
  // to a `Tag` component
  
  return (
    <Inline space="space.050" shouldWrap={true}>
      {[...Array(20).keys()].map((i) => (
        <Tag color={tagColor[i % tagColor.length]}>{`${i + 1}`}</Tag>
      ))}
    </Inline>  );
};

Space

Use to add a gap in between each child.

Rendered tags with adjustable spacing with space tokens set to space.100 and space.200 in this example

1
2
import { Stack, Heading, Inline, Tag } from '@forge/react';

export const InlineSpace = () => {
  return (
    <Stack space="space.100">
      <Heading size="small">Space</Heading>
      <Inline space="space.100" alignInline="start">
        <Tag color="grey-light">1</Tag>
        <Tag color="blue-light">2</Tag>
        <Tag color="green-light">3</Tag>
      </Inline>
      <Inline space="space.200" alignInline="start">
        <Tag color="grey-light">1</Tag>
        <Tag color="blue-light">2</Tag>
        <Tag color="green-light">3</Tag>
      </Inline>
    </Stack>
  );
};

Spread

Use to distribute its children along the horizontal axis.

Rendered tag components distributed horizontally using the spread property.

1
2
import { Stack, Text, Inline, Tag } from '@forge/react'

export const InlineSpread = () => {
  return (
    <Stack space="space.400">
      <Stack space="space.200">
        <Text>With space-between</Text>
        <Inline spread="space-between">
          <Tag color="blue-light">1</Tag>
          <Tag color="purple-light">2</Tag>
          <Tag color="red-light">3</Tag>
        </Inline>
      </Stack>
      <Stack space="space.050">
        <Text>Without space-between</Text>
        <Inline>
          <Tag color="blue-light">1</Tag>
          <Tag color="purple-light">2</Tag>
          <Tag color="red-light">3</Tag>
        </Inline>
      </Stack>
    </Stack>
  );
};