Web component overview

Gestalt provides an extensive set of React components for use in building larger web experiences and patterns. They include interactive UI components and developer utilities to help with implemention.

Not sure which component to use? Reach out to the Gestalt team.

Accordion

Accordion is a container that can be expanded and collapsed to show content about a single subject.

ActivationCard

ActivationCards are used in groups to communicate a user’s stage in a series of steps toward an overall action.

Avatar

Avatar is used to represent a user.

AvatarGroup

AvatarGroup is used to both display a group of user avatars and, optionally, control actions related to the users group.

Badge

Badge is a label that indicates status or importance.

BannerCallout

BannerCallout is a banner displaying short messages with helpful information for a task on the page, or something that requires the user’s attention.

BannerOverlay

BannerOverlay displays short educational messages when users have performed actions that indicate some intent.

BannerSlim

BannerSlim conveys brief information related to a specific section of a page.

BannerUpsell

BannerUpsells are banners that display short messages that focus on promoting an action or upgrading something the user already has.

Box

Box is a component primitive that can be used to build the foundation of pretty much any other component.

Button

Buttons allow users to perform actions within a surface.

ButtonGroup

ButtonGroup is used to display a series of buttons.

ButtonLink

ButtonLink allow users to use a surface action to link to another page.

ButtonToggle

The ButtonToggle is a larger alternative to selection components such as Checkbox, RadioButton, and Switch.

ChartGraph

ChartGraph is used for displaying various types of graphs plotted on an x and y axis.

Checkbox

Use Checkbox when displaying 3 or more toggle inputs.

Collage

ColorSchemeProvider

ColorSchemeProvider is an optional React context provider to enable dark mode.

Column

Column implements a 12-column system.

ComboBox

ComboBox is the combination of a Textfield and an associated Dropdown that allows the user to filter a list when selecting an option.

Container

Containers are useful in responsively laying out content on different screens.

Datapoint

Datapoint displays at-a-glance data for a user to quickly view key metrics.

DateField

DateField is used when the user has to select a date. The user must input date values with a numeric keyboard.

DatePicker

DatePicker is used when the user has to select a date or date range.

DateRange

DateRange enables users to preview and select a range of days by picking dates from a calendar or adding a text input.

Divider

Divider is a light gray 1px horizontal or vertical line which groups and divides content in lists and layouts.

Dropdown

Dropdown displays a list of actions, options or links.

Fieldset

Fieldset creates a fieldset and legend for a group of related form items in order to clearly indicate related form items.

Flex

Flex is a layout component with a very limited subset of the props available to Box.

GlobalEventsHandlerProvider

React context provider that that allows to share external handlers with consuming components.

Heading

Heading allows you to show headings on the page and has a bigger line height than regular text.

HelpButton

HelpButton is an affordance that accompanies an element on the screen. It helps describe or provide assistance on how to use the accompanying element.

Icon

Icons are the symbolic representation of an action or information, providing visual context and improving usability.

IconButton

IconButton allows users to take actions and make choices with a single click or tap.

IconButtonFloating

IconButtonFloating provides an action that floats over the content and remains in place when scrolled.

IconButtonLink

IconButton is mainly used as navigational element.

Image

Image is used to represent images.

Label

Label is used to connect a label with a form component in an accessible way.

Layer

Layers allow you to render children outside the DOM hierarchy of the parent.

Letterbox

Letterboxes are useful if you have some source media which is larger than the area you want to display it in.

Link

Link allow users to click their way from page to page.

List

List allows users to view individual, but related, text items grouped together.

Mask

Mask is used to display content in a specific shape.

Masonry

Masonry creates a deterministic grid layout, positioning items based on available vertical space.

Modal

Modal displays content that requires user interaction.

ModalAlert

ModalAlert is used to alert a user of an issue, or to request confirmation after a user-triggered action.

NumberField

NumberField allows for numerical input.

OverlayPanel

OverlayPanels are surfaces that allow users to view optional information or complete sub-tasks in a workflow while keeping the context of the current page.

PageHeader

PageHeader is used to indicate the title of the current page, as well as optional actions.

Pog

Pog is a lower-level functional component to show the active, hovered, and focused states of IconButton.

Popover

Popover is a floating view that contains a task related to the content on screen.

PopoverEducational

PopoverEducational is a floating container that introduces users to elements on the screen. Used for education or onboarding experiences.

Pulsar

Pulsars bring focus to a specific element on the screen and act like training wheels to guide people towards the normal way to perform that action.

RadioGroup

Use RadioGroup when you have a few options that a user can choose from.

ScrollBoundaryContainer

ScrollBoundaryContainer is needed for proper positioning when Popover is anchored to an element that is located within a scrolling container.

SearchField

SearchField allows users to search for free-form content.

SearchGuide

SearchGuide appends and refines a search query.

SearchGuideLink

SearchGuideLink is mainly used as a navigational element to direct users to a new page or location, in the context of a search query.

SegmentedControl

SegmentedControl may be used to group multiple selections.

SelectList

SelectList displays a list of actions or options using the browser’s native select.

SheetMobile

SheetMobile is a mobile-only component that is a supplementary container that sits on top of the screen’s primary content.

SideNavigation

SideNavigation is a start-aligned, vertical navigation that is used to navigate between page urls or sections.

Spinner

Spinner helps indicate that a surface's content or portion of content is currently loading.

Status

Status is a graphic indicator of an element's state.

Sticky

Sticky allows an element to become fixed when it reaches a threshold.

Switch

Switch is used for single cell options that can be turned on and off only.

Table

Table is a set of structured data that is easy for a user to scan, examine, and compare.

Tabs

Tabs may be used navigate between multiple URLs.

Tag

Tags can be used to categorize, classify or filter content, usually via keywords.

TagData

TagData can be used to select multiple categories to compare with each other in a graph or chart view.

TapArea

TapArea allows components to be clickable and touchable in an accessible way.

Text

Text is used for all text on the page.

TextArea

TextArea allows for multi-line input.

TextField

TextField allows for multiple types of text input.

TileData

TileData can be used to select multiple categories to compare with each other in a graph or chart view.

Toast

Toasts educate users on the content of the screen, provide confirmation when people complete an action, or simply communicate a short message.

Tooltip

Tooltip is a floating text label that succinctly describes the function of an interactive element.

Video

Video is used for media layout.

WashAnimated

WashAnimated is used to highlight content in grids.

Z-Index Classes

FixedZIndex and CompositeZIndex are utility classes that generate z-indices for Gestalt components.

useFocusVisible

useFocusVisible manages focus interactions on the page.

useReducedMotion

useReducedMotion allows a user to request that the system minimize the amount of non-essential motion.