Nielsen Design System

Foundations

Design Principles

Writing Guidelines

Components

Context Switcher

Data Visualization

Development

How to Use Logo

How to Use List

How to Use Icon

How to Use Global Nav

How to Use Chip

How to Use Button

How to Use Action Icon

How to Use Styles

Create GitLab Access Token

GDS Web + React

Home Foundations

Design Principles Writing Guidelines Accessibility Design Tokens Colors Typography Layout Icons Logo

Accordion Action Icon

Adjustment Bar

Banner Breadcrumb Button Button Group Card Checkbox Chip Context Switcher

Data Visualization

Date Picker

Dialog Empty State

Image

Input Callout

Link List Loader

Menu

Modal Pagination Popout Progress Bar Radio Range Slider Scroll Bar Select

Selection Bar

Table

Tabs Tile Toast Toggle Button Tooltip

Tree Menu

Patterns

Development FAQ

Home Foundations

Design Principles Writing Guidelines Accessibility Design Tokens Colors Typography Layout Icons Logo

Accordion Action Icon

Adjustment Bar

Banner Breadcrumb Button Button Group Card Checkbox Chip Context Switcher

Data Visualization

Date Picker

Dialog Empty State

Image

Input Callout

Link List Loader

Menu

Modal Pagination Popout Progress Bar Radio Range Slider Scroll Bar Select

Selection Bar

Table

Tabs Tile Toast Toggle Button Tooltip

Tree Menu

Patterns

Development FAQ

Selection Bar

Last Updated on Sep 29, 2022

Component Variants

Design Principles

Table of Contents

Component Variants Design Principles

Copyright © 2022 The Nielsen Company (US), LLC. All Rights Reserved.