Workbench components

Accordion is a container used for grouping sections of expandable and collapsible content.

The Actions component organizes calls-to-action in a consistent order across desktop and mobile environments.

Alert is used to communicate success, a warning, a problem/error, or necessary information.

Autocomplete provides fast filtering of large datasets through live search results based on user input.

Badge notifies users of updates and provides a numerical counter.

Box provides spacing, layout, and color helpers.

Breadcrumbs help users understand their location within a hierarchy and move between levels.

Button is an interactive UI element for users to trigger a response.

Card is a container used to create visible separation between pieces of content. It is often used in multiples to improve scannability.

CharacterCount offers immediate validation for text fields with character limits.

Checkbox enables a user to select an option in a form.

DataGrid is an enhanced version of Table that enables users to organize data by searching, sorting, and filtering results.

A DescriptionGroup is a list of items used to organize unique objects of a related topic.

Details is an interactive text container that enables a user to show or hide additional information.

Dialog overlays content on top of a workflow.

Drawer overlays content on the right side of a workflow.

FileDropField is an input that accepts drag-and-drop files such as images or PDFs.

FilterTag is an interactive component used to activate a filter on a large dataset.

Flex is used to build layouts using Flexbox without writing custom CSS.

Resources for building forms at Gusto.

Grid is used to build layouts using CSS Grid.

Heading is used to create semantic heading hierarchies with flexible styles using Workbench’s design tokens.

Instructions for using Gusto’s icon library.

IconButton is an accessible solution for turning an Icon into an interactive element.

The Img component enforces attributes that improve accessibility and improve page loading.

Link are used when navigating between internal and external pages.

Lists are vertically organized groups of related text content marked with a bullet, a number, or an icon.

Menu is a list of groupable actions inside of a container.

Number is a text input field tailored to numbers.

Panel is a customizable all-purpose content container used to create a visual separation between groups of content.

Popover is a smaller variant of Dialog that can be used for simple, context-related actions and filters.

Progress is used to indicate progression through a task or workflow.

Radio enables a user to select one of multiple options.

Select provides users with a dropdown menu of options.

SelectableCard is a Card that can behave as a single or multi select form element.

Skeleton is used to build a skeleton frame of progressively loaded content.

Spinner is used to indicate a loading state.

SubmitButton provides user feedback when submitting a form.

Switch allows users to toggle a boolean selection.

Tables are used for displaying and organizing tabular data.

Tabs group related page content to enable the quick discovery of information.

Tag is used to call out status information to users.

TextArea is a multi-line plain-text input for free-form text.

TextField wraps Input with a label, helper text, and error text.

Timeline is a group of steps in a prescribed order with statuses that reflect progress.

Toasts are used to convey the status of non-critical actions.

ToggleButton is used to toggle a setting on or off.

Toggletip is a simplified version of Popover meant to provide additional context about its target element.

React hook that enables access to Workbench breakpoints within Javascript.

React hook to generates a unique ID.

React hook that enables the Workbench Table Manager, providing table management with powerful features.

CSS utility to hide content while preserving it for screen readers.