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.

UI Kit 2 components

UI Kit 2 components help you build the user interface of your Forge app. Each component is described using a declarative markup language, which can be added to the App.js file of your app.

You can use the following components when building Forge apps:

Action

ComponentsDescription
Button

A button that triggers an event or action.

Button Set

A button set displays multiple buttons together.

Content & image

ComponentsDescription
Code

A code block of formatted code, highlighted in the body text.

Table

A table that displays data and other components.

Image

An image, which functions similarly to a native img element.

User

A representation of a user, displaying details such as name and profile picture.

User group

A stack-like entity that encompasses multiple users, including their names and profile pictures.

Feedback

ComponentsDescription
Badge

An inline visual indicator of a numeric value like a score or number of notifications.

Status lozenge

A visual indicator to display different status types or states.

Date lozenge

An inline component that displays a calendar date.

Section message

A text callout to alert users to important information.

Tag

A visual indicator for UI objects, which is useful for quick recognition and navigation.

Tag group

A group of tag components.

Layout

ComponentsDescription
Tabs

A visual divider, used to organize content by grouping similar information into tabs on the same page.

Link

An inline component that displays a link.

Overlays

ComponentsDescription
Inline dialog

A dialog that displays outside a block of content in a Confluence page.

Modal dialog

A dialog that appears in a layer above the app’s UI and requires user interaction.

Tool tip

A small pop-up box that provides additional information or context when hovering over a component.

Selection & input

ComponentsDescription
Form

A form that allows a list of components, a submit button, and a function that handles the submit event.

Checkbox & checkbox group

A logical group of Checkbox components.

Date picker

A component that allows users to select a date from a calendar.

Radio and radio group

A group of radio buttons that allows single option selection.

Range

A slider component that allows users to select a value within a specified range.

Select

A dropdown menu that allows users to select an option from a list.

Text area

A multi-line text input field.

Text field

A single-line text input field.

Toggle

A component that allows users to switch between two states, typically on/off or true/false.

User picker

A component that allows users to search and select users from a list.

Typography

ComponentsDescription
Heading

A piece of text at the top of a page or section.

Text

A piece of plain text with basic text formatting options.

Rate this page: