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.
Accordions are used to group similar content and hide or show it depending on user needs or preferences. Accordions give users more granular control over the interface and help digest content in stages, rather than all at once.
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.
Dropdowns lists (or simply dropdowns) are used to provide the user with a list of options, which can be either actions or input values. Dropdown lists are triggered by dropdown buttons or form inputs.
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.
Forms allow for user input by mimicking paper forms where users fill in information into particular fields and submit it to the system.
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.
Tokens represent keywords and are used to add or filter objects. They allow users to input information, converting their text to tokens.
Tooltips identify elements or provide additional, useful information about the referring elements.
Trees provide a clear overview of a structure, apply parent-child hierarchy between elements, and use the concept of progressive disclosure to display this structure to users.