Components

Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.

App provider

A top level provider for the Design System.

Atlassian navigation

A horizontal navigation component for Atlassian products.

Avatar

An avatar is a visual representation of a user or entity.

Avatar group

An avatar group displays a number of avatars grouped together in a stack or grid.

Badge

A badge is a visual indicator for numeric values such as tallies and scores.

Banner

A banner displays a prominent message at the top of the screen.

Blanket

A blanket covers the underlying UI for a layered component, such as a modal dialog or a tooltip.

Breadcrumbs

Breadcrumbs are a navigation system used to show a user's location in a site or app.

Button

A button triggers an event or action. They let users know what will happen next.

Calendar

An interactive calendar for date selection experiences.

Checkbox

A checkbox is an input control that allows a user to select one or more options from a number of choices.

Code

Code highlights short strings of code snippets inline with body text.

Comment

A comment displays discussions and user feedback.

Date time picker

A date time picker allows the user to select an associated date and time.

Drawer

A drawer is a panel that slides in from the left side of the screen.

Dropdown menu

A dropdown menu displays a list of actions or options to a user.

Dynamic table

A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.

Empty state

An empty state appears when there is no data to display and describes what the user can do next.

Flag

A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.

Focus ring

A focus ring clearly indicates which item has keyboard focus.

Form

A form allows users to input information.

Heading

A heading is a typography component used to display text in different sizes and formats.

Icon

An icon is a visual representation of a command, device, directory, or common action.

Icon object

An object icon is used to represent an Atlassian-specific content type.

Image

An image that changes in light or dark themes.

Inline dialog

An inline dialog is a pop-up container for small amounts of information. It can also contain controls.

Inline edit

An inline edit displays a custom input component that switches between reading and editing on the same page.

Inline message

An inline message lets users know when important information is available or when an action is required.

Layout grid

A responsive layout grid is a component designed to manage the content of a page.

Link

A link takes people to a new location in the product or another website.

Logo

A logo is a visual representation of a brand or product. It can be a word or an image, or a combination of both.

Lozenge

A lozenge is a visual indicator used to highlight an item's status for quick recognition.

Menu

A list of options to help users navigate, or perform actions.

Modal dialog

A modal dialog displays content that requires user interaction, in a layer above the page.

Onboarding (spotlight)

An onboarding spotlight introduces new features to users through focused messages or multi-step tours.

Page

A page layout organizes sections on a page using a grid and grid columns.

Page header

A page header defines the top of a page. It contains a title and can be optionally combined with breadcrumbs buttons, search, and filters.

Page layout

A collection of components which let you compose an application's page layout.

Pagination

Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Popup

A popup displays brief content in an overlay.

Progress bar

A progress bar communicates the status of a system process.

Progress indicator

A progress indicator shows the user where they are along the steps of a journey.

Progress tracker

A progress tracker displays the steps and progress through a journey.

Radio

A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.

Range

A range lets users choose an approximate value on a slider.

Section message

A section message is used to alert users to a particular section of the screen.

Select

Select allows users to make a single selection or multiple selections from a list of options.

Side navigation

A highly composable side navigation component that supports nested views.

Spinner

A spinner is an animated spinning icon that lets users know content is being loaded.

Table tree

A table tree is an expandable table for showing nested hierarchies of information.

Tabs

Tabs are used to organize content by grouping similar information on the same page.

Tag

A tag labels UI objects for quick recognition and navigation.

Tag group

A tag group controls the layout and alignment for a collection of tags.

Text area

A text area lets users enter long form text which spans over multiple lines.

Text field

A text field is an input that allows a user to write or edit text.

Toggle

A toggle is used to view or switch between enabled or disabled states.

Tooltip

A tooltip is a floating, non-actionable label used to explain a user interface element or feature.

Visually hidden

A utility that hides content from the screen while retaining readability by screen readers for accessibility.

Primitives

Box

A box is a primitive component that acts as a generic container, and provides managed access to design tokens.

Pressable

A pressable is a primitive component for building custom buttons, and provides managed access to design tokens.

Inline

Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.

Stack

Stack is a primitive component based on flexbox that manages the vertical layout of direct children.

Flex

Flex is a primitive layout component that implements the CSS Flexbox API.

Grid

Grid is a primitive layout component that implements the CSS Grid API.

Bleed

Bleed is a primitive layout component that controls negative whitespace.

XCSS

XCSS is a safer, tokens-first approach to CSS-in-JS.

Responsive

Responsive helpers and primitives to build responsive UIs with.

Libraries

CSS

Style components backed by Atlassian Design System design tokens powered by Compiled CSS-in-JS.

CSS reset

A base stylesheet for the Atlassian Design System.

Design tokens

Design tokens are the single source of truth to name and store design decisions.

Motion

A set of utilities to apply motion in your application.

Popper

A wrapper for React Popper for situations which require a bespoke popup where other ADS components are deemed unsuitable

Portal

A wrapper for rendering components in React portals.

Pragmatic drag and drop

Flexible and fast drag and drop for any experience on any tech stack

Tooling

ESLint plugin

The essential plugin for use with the Atlassian Design System.

Storybook addon

Design token storybook addon

Stylelint plugin

Stylelint plugin for use with the Atlassian Design System.

UI Styling Standard

The eslint plugin to enforce and educate on Atlassian's UI Styling Standard