Avatars are how we visually represent our users.

Badge is a decorative indicator used to either call attention to a related item or for communicating non-actionable, supplemental information.

Banner is an inline, page level alert.

The Box component is a low-level primitive used for layout purposes. It can be used to create grid layouts, apply padding or margin, and more.

Breadcrumbs are used for navigating content in parent-child relationships within pages or overlays. They provide context for where users are in a nested hierarchy.

Button is used to trigger actions based on a user's interaction.

The Card component is a low-level primitive used to create regions of content.

Character Counter is a flexible utility component used to tally the remaining number of text characters available for input.

Chart Legend is a stand-alone utility that can be used to add a legend to chart components.

Checkbox is a wrapper for the native checkbox element.

The collapsible component is a utility for creating regions of content that can expand/collapse with a simple animation.

A date picker enables users to select a single date or range of dates in order to filter data for a particular time period.

Drawer is used to overlay content on top of the interface. They are intended to capture the user's attention in order to inform or shift focus to a pertinent task.

Duration is a primitive component used to format durations of time according to our date & time formatting guidelines.

Empty states are moments designed to prevent confusion when the primary contents of a page cannot be displayed.

Fieldset lays out groupings of form elements.

Form Field controls the layout of form elements alongside their labels and errors.

Icons symbolize common actions, features, and themes throughout our app.

Image is a wrapper for the native image tag with support for events and fallback images.

Indicator is a non-actionable ornament that can be used to draw a user’s attention to an area of the UI.

Input is a themed version of the native form field that enables a user to interact and input data.

Keyboard key is used for user education of keyboard command workflows.

Label is a themed version of the native label element that can be paired with other form components like Input, Textarea, Radio and Checkbox.

This component is styled to resemble a hyperlink and semantically renders an anchor or button.

Listboxes allow a user to select a value or multiple values from a custom-styled dropdown.

Loader is used to notify a user that data is being retrieved or processed behind the scenes.

Loader buttons are used to display a loading indicator inside of a button.

Menus are used to present a list of actions to a user.

Messages are how we display user generated content provided by our network partners in app.

Modals are used to overlay content above an interface. They are intended to capture the user's attention in order to inform or shift focus to a pertinent task.

Numeral is a primitive component used to format numbers according to our number formatting guidelines.

Partner logo is used to render logos for official partners in accordance with their brand standards.

Popout is a floating content block triggered via a click on an actionable element.

Radio enables a user to make a single selection from a group of options.

Segmented controls are used for quickly selecting between a small set of mutually exclusive options.

Select enables a user to select a single item from a list of options.

Skeleton loaders create perceived performance and reduce user frustration around load times.

Spot illustration is used to render svg illustrations.

The Stack component is a low-level primitive used to layout items in a horizontal or vertical stack, with even spacing between the items.

Switch enables a user to quickly toggle between two states.

Table is a component used for displaying formatted tabular data.

Tabs are used to navigate between related pages or views while retaining context.

This component is used to render text in a variety of styles based on Seeds values.

Textarea is a themed version of the native textarea element with an enhanced API for formatting and accessibility.

Toasts are messages containing confirmations, notifications, and acknowledgments that require minimal user interaction.

Token is used to denote selected options in a workflow. Tokens are typically picked using select menus and advanced input fields and can be dismissible or static.

A Token Input is a specialized text input that tracks entered values and displays them to the user as tokens.

Tooltip is a small, floating content block triggered via hovering over or focusing on an element.

A component that uses the visuallyHidden utility to hide text from screen.