Components

Watson provides a set of components to help you develop new feature interfaces faster. This frees us up to focus on solving unique product challenges, rather than reinventing interface elements that are already in use.

Action Bar
A file upload allows the user to choose one or more files from their device storage and upload them to a specific location.

Avatar

Avatars are graphic representations of our users and entities in the interface.

Badge
Badges are used to inform of the status of an element or an action that has been taken.

Banner
Banner provides a distinguishable and non-disruptive way to communicate important information or conditions to users.

Breadcrumbs
Breadcrumbs display the path users took to reach the current page, allowing easy navigation back to previous sections.

Button
Buttons are used to trigger an action on a page or complete tasks in other components, such as forms and modals.

Button Group
Button groups bring together button controls that belong to the same context. They help us save space when needed.

Calendar
A calendar allows users to pick a single date or a range of dates from a visual calendar.

Card
The card is a wrapper that displays content and actions on a single topic. It helps us structure the information that an user needs to digest.

Checkbox
Checkboxes allow user to select many options from a limited number of choices.

Collapse
A collapse is a content area commonly used to organize related information that can be collapsed and expanded.

Combobox
Combobox is an autocomplete input that allows users to filter and select one or more values from a list of options.

Date Picker
A date picker is an input control that allows the user to select a single date or a range of dates by either typing or selecting from a calendar.

Divider
Divider component is used to semantically and decoratively separate content into groups.

Dropdown Menu
A dropdown menu is used to display a list of actions. It must be triggered by another component, like a button or icon button.

Empty state
Empty states are used to fill blank spaces when no content is present or when the feature is temporarily empty.

Fieldset
The Fieldset component is used for grouping sets of related checkboxes or radio buttons.

File Upload
A file upload allows the user to choose one or more files from their device storage and upload them to a specific location.

Grid
The Grid component provides a 12-column fluid grid component that spans its whole parent area with flexible columns and fixed gaps.

Header
The Page Header shows the page title, main actions, and navigation, helping users understand their location and interact with the app.

Icon

The icon component allows you to display an icon from the Iconography library.

Icon Button

This component is used to display supplementary actions in the interface, either to trigger actions or drive navigation is allowed.

Input
Inputs enable users to enter text data. They support different formats such as plain text, passwords, numbers, or dates.

Layout
The layout is the top-most structural component in any view and acts as the main wrapper for smaller items within it.

Link
Links are used to navigate users between pages or to an external resource.

Modal
Modal dialog overlays on top of the main content of a page. It is used to focus the user's attention on a specific task and require interaction before they can continue browsing the site.

Navigation List
The navigation list provides local navigation for the current context and indicates the current view.

Pagination
Pagination allows you to divide large amounts of content into smaller chunks across multiple pages.

Popover
Popover is an overlay that opens on demand after clicking on the trigger.

Progress Bar
A progress bar shows the completion status of an ongoing task.

Radio
Radio buttons allow users to choose one option from the list of mutually exclusive options.

Select
Radio buttons allow users to choose one option from the list of mutually exclusive options.

Skeleton
Skeleton is a low-fidelity visual placeholder that represents the loading of an interface element before it is displayed on the page.

Spacer
The Spacer component provides spacing to any wrapped component.

Spinner
A spinner is a visual indicator that confirms a process is happening in the background but the component or view is not yet ready for interaction.

Stack
Stack is a 1-dimensional layout system with options to control the direction, spacing, distribution, and relative sizing of its children elements.

Step Indicator
A step indicator shows the user their progress along the process of completing a task.

Table
A table is a component used to display and organize information from a data set.

Tabs
Tabs are used to organize and navigate between related views at the same hierarchy level.

Text
Use the Text component to provide the hierarchy and structure of a view.

Textarea
Textarea enables users to enter multi-line text data.

Toast
Toasts are non-disruptive messages that appear in the interface to provide quick, at-a-glance feedback on the outcome of an action.

Toggle
The toggle component allows users to toggle a specific option on or off immediately.

Tooltip
Tooltip is a small pop-up box that appears when a user hovers over an element.