The action widget is used to provide a menu of available actions within a widget or application.
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.
Annotations are used to highlight important or insightful information within a large text passage.
A card is a flexible-sized container that groups related blocks of content and information into one understandable unit.
The Card is a clickable UI item that is used to present content in a concise and readable way.
The Card link is a card that acts as a CTA (call-to-action), typically used at the end of a section of a page.
A card is a flexible-sized container that groups related blocks of content and information into one understandable unit.
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.
A simple visual indicator of ownership.
The jewel of the IoT PAL, the data table provides a compact layout for viewing and managing large quantities of data.
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.
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.
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.
The Expressive modal uses the Carbon modal and only deviates to increase readability and usability within expressive moments.
The Feature card is used to emphasize a piece of information, indicate significant progression or highlight an important next step.
Uploading is transferring a resource from a local system to a remote system.
A sticky or fixed button bar should be used for certain forms. See the UX Patterns > Forms for design options and guidelines.
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.
The footer is a section that sits at the bottom of any IBM.com page. It is required on all pages on IBM.com.
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
The Horizontal rule can be used as a graphical element to add structure, introduce breaks in the content, or delineate pieces of information.
The IoT PAL extends the Carbon offering of icon buttons with a number of small use cases centered around icon based buttons.
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.
Icon tabs allow for navigation between groups of content at the same level of hierarchy when space is at an extreme premium.
The Image with caption is used to embed images and has an optional caption.
Use tooltips when a user needs to access additional text and/or functionality related to a specific element, without losing context.
Level 2 nav, also known as L2 or World-level, is a navigation component that allows a user to explore the content and offering within a world.
The L3 nav, or resource level navigation component, is the suggested navigation for a resource details page.
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.
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).
The Link list is used to present links as a group.
The Link with icon is primarily used as a navigational element with an icon as an indicator to the destination or type of content being referenced.
This high level component is dedicated to the population of lists by a user by selecting items from another predefined set of items.
The Locale modal allows users to change geographic regions and languages.
The masthead is a fundamental navigational component for IBM.com that displays consistently at the top of each page.
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.
Modified tabs are used to quickly add or remove tabs. They allow users to view multiple pages of their product in one browser window.
The order summary component summarizes the estimated financial costs and details of a service or offering on IBM Cloud.
The page header allows consistency in the spacing and location of items inside page headers within a product and across products. This avoids users experiencing jarring movement and jumping of headers when navigating among product content.
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.
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.
The password input is a specific example of the Carbon text input in its password form, included here for demonstration purposes.
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.
Required action modals are used when a user must select an action before moving forward. They cannot be dismissed without selecting an action.
Used to visually build rules from logical statements with AND and OR operators.
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.
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.
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.
The user is able to increase and decrease two controls in order to specify a range of values.
Status icons are used to convey information quickly through the use of color and shape. You can use them in a variety of contexts.
The Table of contents allows users to quickly navigate through long pages by providing jump links to different sections of the content within a single page.
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.)
The IoT PAL extends the base set of available Carbon text inputs by offering a wide range of alternative sizes to fit our use cases such as small, large and the infamous double extra large.
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.
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.
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).
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.
The Video player uses Kaltura video platform and is the standard way of using a video on pages and in components.
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.