Skip to content

Workbench components

Workbench contains a set of versatile building blocks designed to work together to form patterns and create cohesive workflows.

  • Accordion

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

  • Actions

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

  • Alert

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

  • Autocomplete

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

  • Badge

    Badge notifies users of updates and provides a numerical counter.

  • Box

    Box provides spacing, layout, and color helpers.

  • Breadcrumbs

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

  • Button

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

  • Card

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

  • CharacterCount

    CharacterCount offers immediate validation for text fields with character limits.

  • Checkbox

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

  • DataGrid

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

  • Details

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

  • Dialog

    Dialog overlays content on top of a workflow.

  • Drawer

    Drawer overlays content on the right side of a workflow.

  • FileDropField

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

  • FilterTag

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

  • Flex

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

  • Forms

    Resources for building forms at Gusto.

  • Grid

    Grid is used to build layouts using CSS Grid.

  • Heading

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

  • Icon

    Instructions for using Gusto’s icon library.

  • IconButton

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

  • Img

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

  • Link

    Link are used when navigating between internal and external pages.

  • List

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

  • Menu

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

  • Number

    Number is a text input field tailored to numbers.

  • Panel

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

  • Popover

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

  • Progress

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

  • Radio

    Radio enables a user to select one of multiple options.

  • Select

    Select provides users with a dropdown menu of options.

  • SelectableCard

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

  • Skeleton

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

  • Spinner

    Spinner is used to indicate a loading state.

  • SubmitButton

    SubmitButton provides user feedback when submitting a form.

  • Switch

    Switch allows users to toggle a boolean selection.

  • Table

    Tables are used for displaying and organizing tabular data.

  • Tabs

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

  • Tag

    Tag is used to call out status information to users.

  • TextArea

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

  • TextField

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

  • Timeline

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

  • Toast

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

  • ToggleButton

    ToggleButton is used to toggle a setting on or off.

  • Toggletip

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

  • useBreakpoint

    React hook that enables access to Workbench breakpoints within Javascript.

  • useId

    React hook to generates a unique ID.

  • visuallyHidden

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