Salt Design System

Glossary

About Salt

Roadmap

Supported platforms

Components

Color

Density

Duration

Foundations

Modes

Responsiveness

Size

Spacing

Typography

Developing with Salt

Get started

Analytical dashboard

App header

Breadcrumbs

Button bar

Contact details

Content status

File upload

Forms

Header block

Patterns

International address form

International phone number

List builder

List filtering

Menu button

Metric

Navigation

Preferences dialog

Selectable card

Split button

Vertical navigation

Support and contributions

Characteristic tokens

Themes

Accordion

AG Grid theme

Avatar

Badge

Banner

Border layout

Button

Calendar

Card

Checkbox

Combo box

Country symbol

Date Input

Date Picker

Dialog

Overview

About

Developing

Designing

Tableau

Icons

Country symbols

Iconography

Shadow

Z-Index

Elevation

Divider

Drawer

Dropdown

File drop zone

Flex layout

Flow layout

Form field

Grid layout

Icon

Input

Link

List box

Localization provider

Multiline input

Navigation item

Number input

Overlay

Pagination

Panel

Parent-child layout

Pill

Progress

Radio button

Range slider

Salt provider

Scrim

Segmented button group

Semantic icon provider

Skip link

Slider

Spinner

Split layout

Splitter

Stack layout

Static list

Status indicator

Stepped Tracker

Switch

System status

Tabs

Text

Toast

Toggle button

Tokenized input

Tooltip

An analytical dashboard enables users to analyze trends, patterns and metrics effectively. You can use this to present data in a hierarchical and intuitive manner.

The mock-ups displayed in this pattern are available as [templates](https://www.figma.com/file/O3FYUQYXLosmEuZc0T30Qo/Analytical-Dashboard-Pattern?type=design&node-id=1288-5747&mode=design&t=Pu46NKEwCeMRSjPD-0) in Figma _(J.P. Morgan employees only)_.

An app header is a consistently available element that sits at the top of every application interface. It contains a brand logo or mark and application-wide functionality, including navigation and utility actions.

Breadcrumbs are a secondary navigation pattern that helps users keep track of their current location within a hierarchy. It provides a space-efficient means of allowing quick navigation to previous levels.

A button bar displays possible actions for users to take when they reach the end of a task. You can use it to provide consistent presentation of button types and orders within pages or dialogs across your applications.

Contact details display communication information for a person, company, distribution list or individual channel. This can include a name, a phone number or email address.

A content status provides information about content in a container component of an application. It remains onscreen until a situation resolves or the user takes action, making it a great tool for communication and guidance.

A file upload allows users to transfer one or multiple files from an external source to the web application. This pattern is commonly embedded in forms or as a standalone element.

A form allows you to capture data, gather opinions and receive information in a consistent format. This pattern provides guidelines for creating forms that are flexible to business domain, user experience and channel.

Header block is a standardized header for container components and application regions, used to display various text elements depending on scenarios. Headings can also display accent and status to highlight messaging.

An international address form gives users a set of form fields to input address information for specific countries. The form displays relevant fields for a user-selected location.

The pattern aims to accommodate users worldwide, but your team may be able to take further steps that fall outside its scope. For example, check with your tech partners if it's possible to detect user location and automatically adjust the form.

Future versions of this pattern will cover the use of APIs, autocompletion and enhanced support for more locations.

An international phone number input gives users a set of form fields to input phone number information for specific countries.

The pattern is a form that displays a relevant phone number field for a user-selected location. You can use it to provide consistent design when implementing International Phone Number Input interactions across your applications.

We provide design guidance on how you can use Salt form control components to achieve the pattern. Your team can take further steps that fall outside its scope. For example, check with your tech partners if it’s possible to autodetect user location using data that can support autogenerating number placeholders. You can also check if it's possible to save the entered number when the user changes the country.

A list builder allows users to create a bespoke list of items from an original list, also known as a pick list, adding or removing items as required. Users can filter the items by using the filter input field.

When searching through a list, a filter enables users to specify criteria and only show relevant options. This pattern introduces the filter behavior of Salt components where a list is used.

A menu button expands to reveal numerous contextual options when there's limited space to display them. The items within the menu are often less frequently used and don't require constant display within the interface.

A metric displays an important number value prominently. You can add indicators or labels to help provide context to the presented value.

A navigation provides users with a structured and intuitive way to go to different pages, sections or features of your website or application. It tells users where they are at all times and ensures they can easily get to where they need to go. Use this pattern to provide consistency that helps users navigate your website or application easily and efficiently.

A preferences dialog allows you to display, group and navigate application preferences within a responsive modal dialog window. This pattern introduces guidelines to make the preferences dialog consistent and usable.

A selectable card allows users to make selections by clicking anywhere within the card. It’s functionally equivalent to a form control, such as [`ToggleButton`](salt/components/toggle-button), [`RadioButton`](/salt/components/radio-button) or [`Checkbox`](/salt/components/checkbox). You can group selectable cards to support single or multiple selection.

A split button enables users to perform a main action and access relevant, supplementary actions inside a menu.

Vertical navigation provides users with a structured and intuitive way to navigate different pages, sections or features of your website or application. It's often on the left of the viewport and organizes links into a single or multilevel structure.

Patterns

Note

Available patterns