Skip to main content

Components (Web)

Components are the building blocks of the design system designed with users in mind.

Components

Components are the building blocks of the design system designed with users in mind.

Components (Web)

Components are the building blocks of the design system designed with users in mind.

Web

The web library of Modus components is specific to web-based applications.

Accordions

The accordion element delivers large amounts of content in a small space through progressive disclosure.

Alerts

Alerts provide contextual information about system status that persists until dismissed or resolved.

Autocomplete

The autocomplete is a text input field enhanced by a panel of suggested options.

Badges

Badges are non-interactive labels which hold small amounts of information.

Breadcrumbs

The breadcrumb element is a secondary navigation pattern that shows hierarchy among content.

Button Groups

Button groups allow selection from a similar or related set of options.

Buttons

Buttons are interactive elements that trigger an action or an event.

Cards

Cards provide a set of content which acts as an entry point to more detailed information.

Checkboxes

Checkboxes are used for a list of options where the user may select multiple options, including all or none.

Chips

Chips represent small blocks of information and are commonly used for input or filtering.

Content Tree

A content tree provides users with a way to navigate nested hierarchical information using a parent-child relationship model

Date & Time Picker

Allows the user to select a single date, a date range, or time.

Dropdowns

Dropdowns present a list of options that can be used to filter or sort existing content.

File Upload Dropzone

File upload dropzone allows users to upload single or multiple files to the application by dragging and dropping.

Inputs

Input fields collect information from users.

Lists

A list can be used to display content related to a single subject.

Messages

Messages provide the user with contextual static information. They have a lower priority than an alert.

Modals

Modal dialogs interrupt workflows and require user interaction.

Navbars

The navbar provides context through globally accessible menu options.

Pagination

Pagination affords navigation between pages of content, and it highlights the page currently in view.

Progress Bars

Progress indicators express an unspecified wait time or display the length of a process.

Radio Buttons

Radio buttons are used when options are mutually exclusive.

Rich Text Format Editor

Rich Text Format (RTF) Editor allows the user to style fonts and layout in a text area field.

Sentiment Scale

Sentiment scale is a way to collect user feedback fast.

Side Navigation

Vertical, collapsible navigation on the left side of the application.

Sliders

Sliders allow users to make selections from a range of values.

Spinners

Spinners indicate progress by showing users a loading state.

Switches

Switches are used to toggle functionality.

Tables

Tables display information in a grid-like format of rows and columns.

Tabs

Tabs are used to quickly navigate between views within the same context.

Toasts

Toasts provide non-intrusive, short-lasting contextual feedback to the user.

Toolbar

Toolbar consists of a series of icon buttons occupying minimum workspace.

Tooltips

Tooltips provide a short description of a page element or control.

Transactional Emails

Auto-response emails that follow an action by a subscriber or user.

Utility Panel

Utility panel is a container for additional content and/or functionality related to the primary screen.