About UI Kit 2
UI Kit 2 components
UI kit components
Product bridge APIs
Jira bridge APIs

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:

NameTypeRequiredDescription
alignBlockstringNoAligns children vertically. Valid values are:
  • start
  • center
  • end
  • baseline
  • stretch

Defaults to start.
alignInlinestringNoAligns children horizontally. Valid values are:
  • start
  • center
  • end

Defaults to start.
growstringNoSets whether the container should grow to fill the available space. Valid values are:
  • hug to use space only as required by its children
  • fillto take all space provided by the parent element.

Defaults to hug.
rowSpacestringNoRepresents 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
  • shouldWrapbooleanNoSets whether children are forced onto one line or will wrap onto multiple lines.
    Defaults to false.
    spacestringNoRepresents 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
  • spreadstringNoDistributes 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>
      );
    };
    

    Rate this page: