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.
- Animated Number Part of the extended design system layer Animated numbers provide a signifier that values are being changed.
- Avatar An avatar represents a unique entity, like a person, group, or project.
- Avatar group An avatar group displays multiple user avatars in a compact layout.
- 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 Part of the extended design system layer 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.
- Button group A button group visually unites multiple related buttons into a single collection.
- Card A card is a flexible container that groups related content and actions in a consistent visual structure.
- Character count A character count displays the current and maximum number of characters allowed in a text input or textarea.
- Checkbox A checkbox form element represents a boolean option.
- Collapse Collapse is used to keep pages focused on the overview of what the user can do.
- Combobox A combobox is a panel of options typically opened by a button or text input.
- Dashboard panel Part of the extended design system layer A dashboard panel displays content and data for analysis and decision-making. It's the basic building blocks of a dashboard, but can also be used on its own. In a customizable dashboard, it can be moved and resized by a user to create their preferred layout.
- 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
- 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.
- Form combobox A form combobox combines a text input with a list of options for autocomplete functionality.
- Form fields Form fields provides a way to build forms using configuration.
- Form group Form group adds structure to forms.
- Form input group A form input group allows prepending or appending content to text inputs.
- Friendly Wrap The friendly-wrap component lets you wrap text in a predictable way.
- Infinite scroll Infinite scroll helps users parse a large number of items by breaking up lists and distributing the results.
- Intersection Observer This intersection observer component is an invisible watcher that emits events when it appears and dissapears from view.
- Intersperse The intersperse component separates a list of elements by a given character.
- Label Part of the extended design system layer 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 Part of the extended design system layer 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.
- Sprintf Sprintf lets you do sprintf-style string interpolation with child components.
- Stepper Part of the extended design system layer 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 Part of the extended design system layer A tree component structures parent and child nodes into a meaningful hierarchy.
- Truncate The truncate component lets you truncate long texts with ellipsis.
- Truncate Text The truncate text component lets you truncate a large text by number of lines.