Pajamas components
A component is a UI element that serves a singular purpose or function. Two or more simple components can combine to form a composite component that still has a single function. For example, an avatar, button, or combobox.
- 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.