Pajamas components are written in Vue and designed in Figma. Select a component to learn more about how to use them for your design or development project.
An accordion is used to show and hide content.
An alert is a system generated, contextual, and timely message to a user that may or may not result from their action.
An avatar represents a unique entity, like a person, group, or project.
A badge highlights system generated metadata as an attribute of a larger object.
A banner promotes awareness of a new feature or high-priority research initiative.
A breadcrumb is a navigational element to help a user understand the current location in the application as well as content structure and hierarchy.
A broadcast message delivers an instance level message from the admin to all users.
A button indicates a distinct action and executes a function. Text, icon, or a combination of the two express the action and are supported by the variant and occasionally a tooltip.
A card displays a single group of content within a set of similar groups.
A checkbox form element represents a boolean option.
A color picker allows users to customize a component by choosing a color option. It is only available in instances where a user is adding bespoke content that needs to be differentiated.
The date picker allows a user to choose and/or input a date by using a calendar dropdown or by typing the date into a text field.
A drawer presents context-specific information and/or actions without leaving the current page.
A dropdown is a widget that includes a panel opened by a trigger button.
A file uploader is used to upload files from a computer or device to the application.
Filters allow a user to narrow down content by taking an existing list and removing items based on criteria that matches or doesn’t.
A form is for capturing and submitting user input.
Infinite scroll helps users parse a large number of items by breaking up lists and distributing the results.
Labels are editable objects that allow users to manually categorize other objects, like issues, merge requests, and epics. They have a name, description, and a customizable color. They provide a quick way to recognize which categories the labeled object belongs to.
A list consists of related pieces of information grouped together, clearly associated to each other. Lists are easy to read and maintain, and they provide a good structural point of view for interface elements.
A modal is used to reveal critical information, show information without losing context, or when the system requires a user response.
Pagination breaks up content into multiple pages with controls for navigating those pages.
Paths are horizontal process flows composed of a series of stages.
Popovers are used to provide supplemental, useful, unique information about an element, including one or multiple actionable elements. They inform the user of additional information within the context of their original view, but without forcing the user to act upon it like a modal.
A progress bar indicates a percentage of completion.
A radio button typically represents a single option in a group of related choices.
Search patterns enable users to find certain information by adding criteria that match their query.
A segmented control allows users to choose one out of a range of available options. It is a button group of equal options where only one can be selected and active. There must always be one option active.
A skeleton loader is a simplified preview of loading content.
Socks represent a unique way to warm your feet.
Sorting allows users to quickly re-organize similar content on a long list when the default order may be insufficient for users to scan the data set.
A spinner is an animated element that appears after a user's action to indicate that saving or loading is in progress.
Tables display tabular data in a basic grid composed of cells, columns, and rows. This format makes it easy for users to scan and compare large amounts of data.
Tabs divide content into meaningful, related sections.
A toast displays a short system message as a result of a user's action.
A toggle is a visual switch which acts as a boolean.
A token represents a keyword used to add or filter objects.
Tooltips identify elements or provide additional, useful information about the referring elements.
A tree component structures parent and child nodes into a meaningful hierarchy.