Last updated Jan 20, 2021

Code

An entire block of formatted code, highlighted in the body text.

Screenshot of what the rendered code component should look like

Import statement

1
2
import ForgeUI, { Code } from '@forge/ui';

Props

NameTypeRequiredDescription
textstringYesThe code to be formatted.
languagestringThe language in which the code is written.

Supported languages

The code component currently supports the following programming languages:

"abap", "actionscript", "ada", "arduino", "autoit", "c", "c++", "coffeescript", "csharp", "css", "cuda", "d", "dart", "delphi", "elixir", "erlang", "fortran", "foxpro", "go", "graphql", "groovy", "haskell", "haxe", "html", "java", "javascript", "json", "julia", "kotlin", "latex", "livescript", "lua", "mathematica", "matlab", "objective-c", "objective-j", "objectpascal", "ocaml", "octave", "perl", "php", "powershell", "prolog", "puppet", "python", "qml", "r", "racket", "restructuredtext", "ruby", "rust", "sass", "scala", "scheme", "shell", "smalltalk", "sql", "standardml", "swift", "tcl", "tex", "text", "typescript", "vala", "vbnet", "verilog", "vhdl", "xml", "xquery"

Example

1
2
const App = () => {
  const exampleCodeBlock = `  // React Component
    class HelloMessage extends React.Component {
      render() {
        return (
          <div>
            Hello {this.props.name}
          </div>
        );
      }
    }

    ReactDOM.render(
      <HelloMessage name="Taylor" />,
      mountNode
    );
  `;
  return (
    <Code text={exampleCodeBlock} language="javascript" />
  );
};

Table

A table that displays data and other components.

Screenshot of a rendered table

Usage notes

This component can't contain another Table component within itself.

Import statement

1
2
import ForgeUI, { Table, Head, Row, Cell } from '@forge/ui';

Props

NameTypeRequiredDescription
TableHead | Array<Row>YesTop-level component of a table.
HeadArray<Cell>YesContainer of cells for the heading row of the table. A table can only contain one Head.
RowArray<Cell>YesContainer of cells for a row of the table.
rowsPerPagenumberNoMaximum number of rows shown in the table before pagination is automatically enabled. Defaults to 25. Set to 0 to disable automatic pagination.
CellForgeComponentYesCell can contain any value or component, except a Table component.

Example

1
2
import ForgeUI, { render, Macro, Table, Head, Cell, Text, Row } from '@forge/ui';

const issues = [
  {
    key: 'XEN-1',
    status: 'In Progress',
  },
  {
    key: 'XEN-2',
    status: 'To Do',
  },
];

const App = () => (
  <Table>
    <Head>
      <Cell>
        <Text>Issue Key</Text>
      </Cell>
      <Cell>
        <Text>Status</Text>
      </Cell>
    </Head>
    {issues.map(issue => (
      <Row>
        <Cell>
          <Text>{issue.key}</Text>
        </Cell>
        <Cell>
          <Text>{issue.status}</Text>
        </Cell>
      </Row>
    ))}
  </Table>
);

export const run = render(<Macro app={<App />} />);

Image

An image.

Gif of homer simpson retreating into bushes

Import statement

1
2
import ForgeUI, { Image } from '@forge/ui';

Image permissions

Make sure that the image URL is added to the app's manifest file to load the image. For more information on how to declare image sources in an application's manifest file, see image permissions documentation.

Example to add an image URL in the manifest

1
2
permissions:
  external:
    images:
      - 'https://www.example-dev.com/image.png'

Props

NameTypeRequiredDescription
altstringYesThe alternative text displayed if the image is not loaded.
srcstringYesThe URL of the image.
size'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'The size of the image. Defaults to xlarge.

Example

1
2
<Image
  src="https://media.giphy.com/media/jUwpNzg9IcyrK/source.gif"
  alt="homer"
/>

Avatar

In UI kit version 0.15.0 and later, the Avatar component has been removed and is replaced by the User component.

A visual representation of a user (subject to their privacy settings). A row of avatars is displayed in an AvatarStack.

Avatar picture and name of Atlassian user

Usage notes

You can access the current user's Atlassian account ID with the useProductContext UI hook.

Import statement

1
2
import ForgeUI, { Avatar } from '@forge/ui';

Props

NameTypeRequiredDescription
accountIdstringYesThe Atlassian account ID of the user.

Example

1
2
<Avatar accountId="5a1234bc8d12345e3f1g11hi" />

AvatarStack

In UI kit version 0.15.0 and later, the AvatarStack component has been removed and is replaced by the UserGroup component.

A stack of multiple avatars (name and profile picture) for users, subject to their privacy settings.

Avatar stack with seven Atlassian users

Import statement

1
2
import ForgeUI, { AvatarStack } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<Avatar>YesThe Atlassian account IDs for the users whose avatars are displayed in the AvatarStack. See Avatar for further details on the props.

Example

1
2
import ForgeUI, {render, AvatarStack, Avatar} from '@forge/ui';

const App = () => {
    return (
        <AvatarStack>
            <Avatar accountId="5a1234bc8d12345e3f1g11hi"/>
            <Avatar accountId="2a98a42dbc7ab42e12ee360d"/>
            <Avatar accountId="5d8732lq8jg85a0e3f1g90as"/>
            <Avatar accountId="2h98a10dbl5ab93e62hja23z"/>
            <Avatar accountId="7b20f0bc2d05325e3f1g43ty"/>
            <Avatar accountId="2p72s42dbc7ab42e90gf252d"/>
            <Avatar accountId="2l01x78mf4pqw42e84fg40ad"/>
        </AvatarStack>
    );
};

export const run = render (<App/>);

User

A component that represents a user, displaying details such as name and profile picture, subject to the user's privacy settings.

User picture and name of Atlassian user

The User component can also be used within a Text component, appearing as a lozenge with the name of the user when used within this context.

Import statement

1
2
import ForgeUI, { User } from '@forge/ui';

Props

NameTypeRequiredDescription
accountIdstringYesThe Atlassian account ID of the user.

Example

Display a user.

1
2
<User accountId="5a1234bc8d12345e3f1g11hi" />

Note, you can access the current user's Atlassian account ID in the app product context.

UserGroup

A stack of multiple users (name and profile picture), subject to their privacy settings.

User group with seven Atlassian users

The UserGroup component can also be used within a Text component, appearing as lozenges with the names of the users when used within this context.

Import statement

1
2
import ForgeUI, { UserGroup } from '@forge/ui';

Props

NameTypeRequiredDescription
childrenArray<User>YesThe users (specified by Atlassian account ID) whose avatars and/or names are displayed in the UserGroup. See User for further details on the props.

Example

A simple group of seven users using the UserGroup component.

1
2
import ForgeUI, { render, UserGroup, User } from '@forge/ui';

const App = () => {
    return (
        <UserGroup>
            <User accountId="5a1234bc8d12345e3f1g11hi"/>
            <User accountId="2a98a42dbc7ab42e12ee360d"/>
            <User accountId="5d8732lq8jg85a0e3f1g90as"/>
            <User accountId="2h98a10dbl5ab93e62hja23z"/>
            <User accountId="7b20f0bc2d05325e3f1g43ty"/>
            <User accountId="2p72s42dbc7ab42e90gf252d"/>
            <User accountId="2l01x78mf4pqw42e84fg40ad"/>
        </UserGroup>
    );
};

export const run = render (<App/>);

Rate this page: