Salt Design System

Salt Foundations consist of the fundamental principles and design tokens used to create a cohesive design language. These foundations ensure that components and patterns are visually consistent, accessible, and easy to use.

Key areas covered by the foundations include:

• Assets: Icons and country symbols for visual representation.
• Visual Styles: Border styles, color palettes (including light/dark modes), typography, and cursor behaviors.
• Spatial & Dimensional: Spacing, size (dimensions), density, and responsiveness for different screen sizes.
• Depth & Motion: Elevation (shadows and z-index) and duration (timing for system feedback).
• Data Visualization: Principles for presenting information visually.

The ComboBox component (part of @salt-ds/core) allows users to select an item from a large list of options using typeahead functionality. It combines an input field with an overlay list that filters as the user types. Once a selection is made, the field is populated and the overlay closes. It is a more efficient alternative to a standard Dropdown when dealing with large datasets where scrolling is inefficient.

Commonly referred to as:

• Typeahead
• Editable Dropdown
• List Box
• Autocomplete
• Autosuggest

The GridLayout component from @salt-ds/core allows you to arrange UI elements within a system of columns and rows. It is designed to create evenly distributed, responsive, and organized interfaces, making it ideal for positioning repeating widgets in areas like a Dashboard.

To handle different viewports, you can combine GridLayout with GridItem and responsive breakpoints to control how content is displayed across various screen sizes.

import { GridLayout, GridItem } from '@salt-ds/core';

The Panel component is used to organize content into distinct regions within an application. It conveys visual hierarchy through the use of background color and elevation. It is conceptually similar to a Card or a Container.

import { Panel } from '@salt-ds/core';

The SystemStatus component (also known as System Message) is used to communicate essential platform-wide information, such as maintenance or outage alerts. It is designed to be noticed immediately and prompts users to take action based on one of four severity levels. Each severity level includes a specific icon and color scheme:

• info: Informational messages.
• success: Positive confirmation or successful state.
• warning: Cautionary alerts that require attention.
• error: Critical alerts or outages.

This component is part of the @salt-ds/lab package.

The Menu component is a container used to present a selection of choices or actions. It is also known as a Cascading Menu. Users typically open the menu via a customizable trigger, such as an interactive button, a keyboard shortcut, or a mouse right-click. It is part of the @salt-ds/core package.

Related Components:

• Dropdown: A similar UI pattern.
• Icon: Can be used inside menu items.

The Slider component allows users to select a single value from a track. It supports tooltips on hover/focus, custom steps, marks, and accessibility features like custom screen reader text.

Key props for basic usage:

• min / max: Define the range.
• value: The current selected value (use for controlled components).
• step: The increment value (defaults to 1).
• onChange: Callback triggered continuously during interaction.
• onChangeEnd: Callback triggered when the interaction finishes.

import { Slider } from '@salt-ds/core';

// Basic usage
<Slider min={0} max={100} defaultValue={50} />