Components Overview

The application header identifies the product and provides persistent access to tools and elements that are universally applicable across all pages within an application.

Avatar displays visual depictions to identify an author or user.

Banners display a system-level message.

Block messages provide contextual information adjacent to items on the visible page. There are four types: error, warning, success, or informational.

Buttons trigger interactions throughout the experience.

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

Checkboxes afford one or more selections from a set of options.

Combo Boxes provide single or multiple Select functionality with the added benefit of MDPS styling and live search.

Data Tables are used to display static data in a tabular format.

Date pickers provide single date selection through a visual calendar element tied to an input.

Dialogs elicit a response or reveal critical information without losing the context of the underlying page.

Empty states appear when content is missing or unavailable, providing insight on what has happened and how to proceed.

Exhibits pair a visual element and a caption to provide additional content intended to aid in the communication of ideas.

Field sets wrap multiple deeply related elements within a form.

Forms gather information from users via Checkboxes, Inputs, Radio Buttons, Selects, and Textareas. Labels sit atop these elements.

Inline Messages provide contextualizing information for a single object such as a status or when an action is required.

Inputs are form elements that allow a user to input and interact with data.

Links navigate to other pages or additional information.

List groups create simple vertical lists as well as complex, multi-level collections of Links and other elements.

Loaders indicate that content will process for an indeterminate amount of time.

Modals gather information, complete a subtask, or provide additional information without losing the context of an underlying page.

The ESG Risk Rating component uses our signature globes to display ESG Risk Rating and ESG Risk Rating Assessment data.

The Medalist Rating component displays the shield and lettering artwork for these managed product ratings.

The star rating component displays the signature Morningstar Rating for funds and stocks.

Navigation provides users with a structured and organized way to navigate through the various sections or pages of an application.

Notifications float in front of page content and provide information about page-level or out-of-view events. There are four types: error, warning, success, or informational.

Pagination affords navigation between pages of content and highlights.

Popovers are compact containers attached to elements that hold additional information or controls.

Radio buttons afford a single selection from two or more options.

Range Sliders select a numeric value, or range of values, by moving a handle, or set of handles, along a bar.

Search fields allow a user to type in exactly what they’re looking for.

Search Results display content returned in response to a user’s search.

Sections combine a title, border, content area, and–when appropriate–actions to introduce a group of information and/or functionality. They also help establish clear visual hierarchy, adding structure to a composition.

Segmented Button joins two or more buttons into a unified control, formerly called a button group.

Selects afford a single selection from a predefined list of options.

Steppers track progress through linear workflows.

Switches afford a choice between one of two opposing states or options.

Tabs provide navigation between sets of content.

Tags provide contextualizing information, such as filtering criteria or object metadata.

Textareas allow a user to input multiple lines of text.

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