Black Lives Matter. Support the EJIEqual Justice Initiative
Skip to main contentCarbon Design System

Component index

These components are developed and maintained by members of the IBM Carbon community and are currently only accessible to IBMers. They may change over time, and they may be incomplete or experimental. For support, please contact the contributors listed on each page.

some-img
Cards

A card is a flexible-sized container that groups related blocks of content and information into one understandable unit.

some-img
Headers

All products within the IBM Cloud Pak for Integration should use the recommended header. Exception is if a product requires a version of the header that needs to allow for customization by customers

some-img
Modified tabs

Modified tabs are used to quickly add or remove tabs. They allow users to view multiple pages of their product in one browser window.

some-img
Multistep confirmation

Component created that allows users to know exactly which operations are being taken as a result of an action or set of actions that they have completed.

some-img
Slide-in panel

Opens as the result of a user action. This component is an empty framework of which the content should be determined as required by products.

some-img
Slide-over panel

The slide over panel opens as the result of a user action and can be opened from anywhere in the product UI. It will overlay the main page content.

some-img
Widget

A dashboard widget provides a summary of a platform functionality, status, or individual service. The goal of a widget is to provide actionable information that helps the user quickly accomplish a key task or track key metrics.

some-img
Card

A card is a flexible-sized container that groups related blocks of content and information into one understandable unit.

some-img
Enhanced data table

EnhancedDataTable is meant to be used in place of the carbon DataTable. It is intended to make working with the DataTable much simpler and provide a more consistent experience.

some-img
Error boundary

ErrorBoundary is a component used to prevent JS code from crashing React. The component will catch any JS errors thrown from any React components rendered as children and show a generic error message in it’s place.

some-img
L2 (world level nav)

A component used for navigation of a world pages. It is used for switching page views within a world. The World Level Nav (L2) supports menus by adding an items array to an item. Each World Level Nav (L2) should include a 16 pixel icon above its title.

some-img
L3 (world level nav)

The L3 nav, or resource level navigation component, is the suggested navigation for a resource details page. Learn more about other navigation levels and components here.

some-img
Order summary v2

The order summary component summarizes the estimated financial costs and details of a service or offering on IBM Cloud.

some-img
Page header

All pages in IBM Cloud should have a page header. The purpose of a page header is to: provide context for the entire page and tell the user exactly where they are in the platform; act as wayfinding and/or navigation; and surface metadata or functionality that affects the entire experience below the header.

some-img
Side panel

The side panel is used for keeping users in-context to a page while performing a task like editing, viewing details, or creating something new on a page.

some-img
Action widget

The action widget is used to provide a menu of available actions within a widget or application.

some-img
Annotation

Annotations are used to highlight important or insightful information within a large text passage.

some-img
Heading

Headings are text elements that are used to add typographic hierarchy to a page or component’s content.

some-img
Interactive tooltip

Use tooltips when a user needs to access additional text and/or functionality related to a specific element, without losing context.

some-img
Link

Links are used primarily for navigation. Links also can change what data is displayed, or how, such as to view more, or to show all.

some-img
Selectable item

Use when the user may select one option from a mutually exclusive list of options (substitute for radio buttons). Use when the user may select one or more options from a list (substitute for checkboxes).

some-img
Slider

The user is able to increase and decrease two controls in order to specify a range of values.

some-img
Tag

Use tags for items that need to be labeled, categorized, or organized using keywords that describe them. Tags can also be interactive, providing a substitute for elements such as links or buttons. (For single and multi select tags, please use the Selectable Item component.)

some-img
User message

The user message component is a sub-component that is used within the Ask Watson Conversation pattern. It is used to denote which messages in a conversation were submitted by the user.

some-img
Catalog / marketplace

The catalog series of components work together to support the ‘catalog’ UX pattern (to come), with a series of tiles to display resources in a friendly, browsable way, as well as a wrapper to support and control the layout and features that can be used to support things like searching and filtering.

some-img
Combo box

A tool that allows inputs to be either supplied or selected from a list of suggestions, similar to autocomplete.

some-img
Data table

The jewel of the IoT PAL, the data table provides a compact layout for viewing and managing large quantities of data.

some-img
Date time range selector

Used significantly with dashboards, this enhancement to the Carbon date picker, the date/time range selector enables users to easily choose from a preselected list of relative ranges, a custom relative range or even a custom absolute range.

some-img
Dividers

Divders are horizontal or vertical rules that are 1px lines with padding on either side, used to create a visual break between areas of content.

some-img
Dropdown

The dropdown component allows the user to select from a pre-existing set of options. Use the Combobox component instead if the user can also add a new option.

some-img
Fixed button bar

A sticky or fixed button bar should be used for certain forms. See the UX Patterns > Forms for design options and guidelines.

some-img
Floating palette

The palette is to be used in partnership with a Canvas (see dashboard configuration pattern), and functions as a method for users to browse a set of objects such as charts, before inserting them onto their canvas.

some-img
Icon buttons

The IoT PAL extends the Carbon offering of icon buttons with a number of small use cases centered around icon based buttons.

some-img
Icon content switcher

Within many IoT offerings a number of different ‘view’ formats are required to be close at hand to our users over an identical data set. For example; list vs map, or list vs tiles, or table vs chart.

some-img
Icon tabs

Icon tabs allow for navigation between groups of content at the same level of hierarchy when space is at an extreme premium.

some-img
Large modals

Within complex application patterns, it is sometimes a necessity to place complex or very large interactions within a modal context such as in the Advanced filtering, Rule builder and Expression builder UX patterns.

some-img
Link bar

A lightweight alternative to the content switcher component where its usage would be inappropriately heavy in visual weight for the desired information hierarchy, or a content switcher is already in use for the different dimension (see usage guidelines for more).

some-img
List builder

This high level component is dedicated to the population of lists by a user by selecting items from another predefined set of items.

some-img
List

A sibling of the data table component, lists are to be used when a number of items need to be viewed, updated and managed.

some-img
Menus

Menus act as an extension to the base set of capabilities that comes with traditional overflow menu options with the ability to contain a large range of content.

some-img
Page title bar

At the top of every page in an application, beneath the primary header you will find the page title bar informing the user of where they are and briefly what they can do there, sometimes enriched with a small number of key indicators or actions.

some-img
Pagination

The IoT PAL supports a large variety of pagination types for differing types of use case and pattern.

some-img
Password input

The password input is a specific example of the Carbon text input in its password form, included here for demonstration purposes.

some-img
Progress indicator

The progress indicator used within the IoT PAL is partially guidance based, but also provides some new capabilities in the form of sub-steps and responsive.

some-img
Schematic diagram

Schematic diagrams provide a method for users to view, and navigate around an image representation of a given asset, system or concept.

some-img
Search

An enhanced component built to allow users to rapidly find a given result from a large list of possibilities.

some-img
Status icons

Status icons are used to convey information quickly through the use of color and shape. You can use them in a variety of contexts.

some-img
Tabs (guidance)

When an area of an application has either too much content, or content with too clear a difference logically to fit in a single page, the page tabs component adds onto the page title bar to allow multiple pages to exist in the same area.

some-img
Tile

Tiles are a flexible component for displaying a wide variety of content, including informational, getting started, how-to, next steps, and more. The IoT PAL uses the base Carbon component to create some composed tile components, as well as offering a standard tile template to aid in consistency with custom tiles.

some-img
Toggle

The toggles in the IoT PAL simply extend the base Carbon offering through the addition of the ability place the ‘value’ on the left hand side of the toggle itself.

some-img
UI shell header

The UI shell header forms the uppermost bar of applications and provides users with things such as the application name, and access to common actions.

some-img
UI shell right panel

Reachable via the utility icons in the header, the UI shell panel provides an optional space to shows additional system level actions or content associated with the selected utility. Generally content that is either outside of a typical workflow such as a profile, but also tasks that may be aysnchronous to main workflows (eg: notifications).

some-img
UI shell side nav

The UI shell side nav panel provides users with their primary method of navigating around the different areas of our applications from the left hand side of the users screen. In the Watson IoT design system, we use the Carbon left panel as a base but deviate in both behaviour and styling in some small, but significant ways.