Colors

Accessibility

Badges are non-interactive labels used to call out specific information about an object. There are four types of badges in DDS: Information, Status, Feature, and Notification.

Feature badge

Specs

Usage

Data display

Information badge

Tags are components used to organize or classify information. They are unique from badges because they are user-generated - the user can choose what text to include within it and what color to assign to it. 

Radio Group

Inputs

Simple Grid

Layout

Modals are dialog boxes that are intended to interrupt a user's workflow to collect or acknowledge critical information.

Modal

Notifications

The SplitMenuButton component exists when you need to group multiple CTAs together but also have a primary action the user will likely activate.

Split Menu Button

Menus

Toggle

Toasts are notifications that are generally timed. They appear briefly on the top of the page to display an alert or short message to the user and disappear after a few seconds.

Toast

Overview

Forms are a collection of input components used to collect information from users.

Form

Checkbox Group

Line graphs are used to display quantitative values over a period of time. They are most frequently used to show trends and analyze how data has changed over time.

Line Graph

Reports

Select is an input field that allows users to select one or more options from a given list.

Select

Number Input

Icon

Status badge

A text input that can capture words or phrases as part. This component is based on React Select.

Multi Select Text Input

Drawer is a dialog container that appears on top of the page content. It provides a sliding panel with an optional overlay and is often used for settings, additional content, or navigation menus.

Drawer

Containers

A tile is an clickable card that can contain a variety of components to offer selections or options for a user to navigate to.

Tiles

Wizard

A Menu is a list of items presented for either taking an action or selecting an option - this showcases that content using an icon as the primary rendering.

Icon Menu Button

Buttons are interactive elements used to communicate calls to action for the user. 

Button

Button variants: Primary, Secondary, Tertiary, Error, Education

A card is a container that can hold a variety of both interactive and informational content.

Card

Notification badge

Tabs are used to organize related content into specific sections.

Tabs

Collapsible List component can have N nodes and multiple level of categories and sub categories as well. It has multiple features and can be used for both showing data and selecting items from a list of nested data.

Based from the current Tide SubNav and created as part of a Segments Web component. 

Collapsible List

Accordions are containers that can be expanded or collapsed and are used to section information within a page.

Accordion

Checkbox

Partial Input

Highlight Text

Stepper

The Selection Block is a component that allows for one or many collapsible forms to be visible and interacted with on a given page. It should be used when you have conditional fields or options that display based on specific form selections.

Selection Block

The Menu Button is a button component with a dropdown menu that allows the user to select from a given set of options.

Menu Button

The Key Performance Indicator cards intended to show a single clear metric as part of a dashboard.

KPI Card

Note: When using the status indicators in KPI cards - they must be implemented in such a way that the status is dynamic and changes with the changing metric.

A component that's useful to separate sections horizontally or vertically. It replaces the usage of <hr /> tags

Separator

Popovers are used to show small amounts of portaled content based on some trigger, typically a button.

Popovers are used within the app for feature tooltips, as well as showing filtering UIs

Popover

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Tooltip

A bar chart uses either horizontal or vertical bars to show numerical comparisons across categories. 

Bar Graph

Textarea

Gantt Chart

An Avatar component is used to indicate a user (both internal and external to Drift) profile or an account profile. 

Avatar

Flex

A banner is used to provide a concise system/app wide announcement at the top of the page.

Banners

A useful helper component for building raised surfaces

Paper

Tables are used to display data in an efficient way using rows and columns. 

Table

This is not available via DDS yet, but this is how they should be styled if included.

The Inline Alert is a component that provides the user with some context in a given part of the overall page. They should generally be used within a task flow.

These Inline Alerts can be used to provide an info messages as well as information about a new, beta, or upgradeable feature that's in the user's current view. InlineAlerts can optionally be dismissible as well as provide a call to action for the user to act on.


Inline Alert

A simple layout div replacement helper component

Inline Selects are small simple selects that can be used inline with text

Inline Select

Typography

A Menu is a list of items presented for either taking an action or selecting an option.

Breadcrumbs

Text Input

Small text/number inputs that can be used in line with text

Inline Input

Skeleton

Loaders

Status Message

IconButton is a component to be used when wanting to provide an action rendered solely with an icon.

Icon Button

Page Header component that enables navigation on drift pages. Aims to replace the the tide NavigationHeader component. 

Page Header

A Toggle Button can be used to group related options.

Toggle Button

Link

Inline buttons should be used when button functionality is needed in tight spaces or will be repetitively used on a page.

Drift Design System

Introduction