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? Set up time with the Gestalt team.
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.
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.
Callout
Callout is a banner displaying short messages with helpful information for a task on the page, or something that requires the user’s attention.
Card
Card is used to highlight content in grids.
Checkbox
Use Checkbox when displaying 3 or more toggle inputs.
Collage
Collage, similarly to Masonry, creates a deterministic grid layout that can absolutely position and virtualize images.
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.
DatePicker
DatePicker is used when the user has to select a date or date range.
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.
Heading
Heading allows you to show headings on the page and has a bigger line height than regular text.
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.
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.
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.
Module
Module is a container that holds content about one subject.
NumberField
NumberField allows for numerical input.
OnLinkNavigationProvider
OnLinkNavigationProvider is a React context provider to externally control the link behavior of components further down the tree.
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.
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.
SegmentedControl
SegmentedControl may be used to group multiple selections.
SelectList
SelectList displays a list of actions or options using the browser’s native select.
Sheet
Sheets are surfaces that allow users to view optional information or complete sub-tasks in a workflow while keeping the context of the current page.
SideNavigation
SideNavigation is start-aligned and arranged vertically. It is used to navigate between page urls or sections when you have too many menu items to fit in horizontal Tabs
SlimBanner
SlimBanner conveys brief information related to a specific section of a page.
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 are objects that hold text and have a delete icon to remove them.
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.
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.
Upsell
Upsells are banners that display short messages that focus on promoting an action or upgrading something the user already has.
Video
Video is used for media layout.
Z-Index Classes
FixedZIndex and CompositeZIndex are utility classes that generate z-indices for Gestalt components.
useFocusVisible
useFocusVisible manages focus interactions on the page and determines whether a focus ring should be shown.
useReducedMotion
useReducedMotion allows a user to request that the system minimize the amount of non-essential motion.