Components

An accordion expands in place to expose some hidden information allowing the user the flexibility to show and hide certain content by utilizing the progressive disclosure interaction pattern.

The App Drawer displays the global navigation in a vertical format for effortless scanning.

The App Header contains actions that can be accessed from any page across Basis platform.

A badge is a label that's used to bring attention to important information. Badges can display status, categories, or properties.

Buttons are clickable items used to perform a direct action.

The Calendar allows users to visually select a date from a calendar grid for quick and accurate date selection.

Checkboxes allow users to select/deselect an item or items from a list. A checkable input communicates if an option is true, false, or indeterminate. They can be used to make any number of choices, including zero, one, or several. Checkboxes must include a clear, contextual label to help the user make their selection.

Contextual menus display a small set of actions, triggered by a compact button located directly on a piece of content. They contain actions that may otherwise require repeating in a list, table, or other area where space is limited.

The Control Bar appears on pages and modals containing tables or other information and data that a user can interact with by customizing, saving, exporting, or filtering the data in a particular way. The Control Bar content and actions are related and dependent on the user’s page or modal.

A data list is a visual representation of the changes that have occurred to a set of data.

Data tables display information in a grid-like format of rows and columns and function similarly to other spreadsheet applications. Data tables are useful for comparison and analysis of large amounts of data and as an alternative or complementary view to data visualizations.

Date picker allows users select a date, or a range of dates. The date picker displays a date input field by default, and a dropdown calendar appears when the user taps on the input field.

Dropdown buttons display a list of choices when clicked. It is a two step process that provides greater specificity to a singular action.

A Dropdown Select allows users to choose options from a list of predefined choices. It's a space-saving way to offer selections without cluttering the interface.

Dynamic Search allows users to search across multiple data sets and receive instant results as they type.

Empty states are placeholders that appear when a component has no content to display. They can inform users when a search yields no results or when there is no data. Empty states communicate what will appear there, why there isn’t content, and may tell the user what they can do next.

The File Drop component allows a user to upload one or more files from their system. This can be done via drag and drop or by using the browse link to search for files.

The filter bar enables users to apply filters to data sets, thereby narrowing the results to align with their workflow.

Flash messages are used to provide quick, at-a-glance feedback on the outcome of an action. They are always positioned in a consistent place across the app and on top of the page content. Flash messages can be non-dismissive (fading automatically) or dismissive (requiring user interaction).

An icon button is a clickable element that uses only an icon to represent its function. It's a compact way to display an action, particularly useful in situations where space is limited.

An infotip is an informational icon that draws a user's attention to additional, but non critical, information about a function or feature on the screen. It works in conjunction with the tooltip to display read-only text on hover of the infotip icon.

An inline loader is a UI component that indicates that small text elements within an interface are still in the process of loading, providing visual feedback to the user.

Inputs allow users to enter or edit content and data. The Form Input supports custom text entry or selection from pre-defined choices.

The Interactive Card is a flexible UI component designed to display content and enable user interactions.

The Issue Indicator is a component used to visually signify a warning or error state in a specific element or context.

Loaders inform the user that the app is in a working state while retrieving information or performing an action.

The menu bar is designed for bulk editing items, providing users with various options and actions to manage and modify multiple items simultaneously.

Message cards communicate important information, instruction or statuses that are relevant to the application workflows and functions. Message cards are placed within the page content.

Middle truncation allows the application to shorten long text strings while still showing the beginning and end of the text string.

Modals display required decisions, critical information or important tasks. Modals allow users to view and interact with content without navigating away from the page below the Modal.

Pagination is used to navigate between multiple pages of content.

The panel is a container that displays supplementary information or view controls for the user's current page.

A picklist displays a list of choices within a temporary, elevated container. A picklist can be used for navigation, selections or actions.

Pills are interactive elements that are displayed based on user inputs or filters. Pills should make it easier for the users to interact with and manipulate content and data.

Progress bars communicate the working status of a user-initiated action. Progress bars support values between 0% and 100%.

Quick filters allow users to select commonly used, pre-defined filters. A single quick filter may contain one or more filter parameters.

Radios allow users to make a single selection from a list and are shown in a group of two or more.

The rich text editor allows users to create and format text content with different styles, list types, and links.

The row selector allows users to add child items to a parent item. The row selector uses a large target area along with feedback colors, and iconography to give users a quick and visual way to build content.

The Segment Control component allows users to switch between mutually exclusive options. It provides a compact, intuitive way to modify content views or change settings.

The skeleton loader is a temporary placeholder that represents the visual structure of content that is still loading, improving perceived performance.

Step Progress Bars display the steps in a specific process and indicate the user's progression though the steps. Use Step Progress Bars to break up larger processes into smaller tasks.

Tabs are used to group related content at the same hierarchical level. They allow the user to be able to alternate between views within the same context.

The Text Truncate Component is a UI element that manages the display of lengthy text content by truncating it to a specified number of lines in its collapsed state.

The Title Bar displays information, hierarchy and actions for the user's current page.

A toggle switch allows users to quickly switch between two opposing options. It behaves similarly to a physical switch, where a user clicks the switch to change its position.

Tooltips are brief user-triggered messages that provide contextual information about an element on the screen. They are displayed when a user hovers or focuses on the element it is describing.

The Tree Selector is a list view that presents data in a hierarchical order (parent-child relationships) and allows users to select groups of data from any level of the tree.