Pajamas components
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.
Accordion
An accordion is used to show and hide content.
Alert
An alert is a system generated, contextual, and timely message to a user that may or may not result from their action.
Avatar
An avatar represents a unique entity, like a person, group, or project.
Badge
A badge highlights system generated metadata as an attribute of a larger object.
Banner
A banner promotes awareness of a new feature or high-priority research initiative.
Breadcrumb
A breadcrumb is a navigational element to help a user understand the current location in the application as well as content structure and hierarchy.
Broadcast message
A broadcast message delivers an instance level message from the admin to all users.
Button
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.
Card
A card displays a single group of content within a set of similar groups.
Checkbox
A checkbox form element represents a boolean option.
Color picker
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.
Combobox
A combobox is a panel of options typically opened by a button or text input.
Date picker
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.
Disclosure
A disclosure widget includes a button that opens a panel of links or actions.
Drawer
A drawer presents context-specific information and/or actions without leaving the current page.
Dropdown overview
File uploader
A file uploader is used to upload files from a computer or device to the application.
Filter
Filters allow a user to narrow down content by taking an existing list and removing items based on criteria that matches or doesn’t.
Infinite scroll
Infinite scroll helps users parse a large number of items by breaking up lists and distributing the results.
Label
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.
Link
A link is a navigational element that takes a user to another URL, an element within a page, or a file.
Modal
A modal is used to reveal critical information, show information without losing context, or when the system requires a user response.
Pagination
Pagination breaks up content into multiple pages with controls for navigating those pages.
Path
Paths are horizontal process flows composed of a series of stages.
Popover
A popover is used to provide supplemental, useful, unique information about an element, including one or multiple actionable elements. It informs the user of additional information within the context of their original view, but without forcing them to act upon it like a modal.
Progress bar
A progress bar indicates a percentage of completion.
Radio button
A radio button typically represents a single option in a group of related choices.
Search
Search patterns enable users to find certain information by adding criteria that match their query.
Segmented control
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.
Select
An HTML element, typically used in a form.
Skeleton loader
A skeleton loader is a simplified preview of loading content.
Socks
Socks represent a unique way to warm your feet.
Sorting
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.
Spinner
A spinner is an animated element that appears after a user's action to indicate that saving or loading is in progress.
Stepper
A stepper separates structured workflows into meaningful, ordered steps.
Table
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
Tabs divide content into meaningful, related sections.
Text input
A component for the HTML input type="text" element.
Textarea
A component for the HTML textarea element.
Toast
A toast displays a short system message as a result of a user's action.
Toggle
A toggle is a visual switch which acts as a boolean.
Token
A token represents a keyword used to add or filter objects.
Tooltip
Tooltips identify elements or provide additional, useful information about the referring elements.
Tree
A tree component structures parent and child nodes into a meaningful hierarchy.