Components

Components are the reusable building blocks of the Matchbox design system.

Use an ActionList to provide the user with a set of tasks or operations

A badge is used to display numerical values.

A banner is used to display prominent information to the user.

Box is a primitive component that provides all available system props.

Breadcrumbs are a navigation component that provide context of the user's location in the application

A button is an interactive element that triggers an event or initiates an action.

A checkbox is a input element that allows users to select zero or more options.

An input element that allows users to select zero or more options.

A codeblock is used to display snippets of code.

Columns is a component used to create flexible layouts.

A datepicker allows users to select dates or date ranges from a calendar.

A drawer is a container for content on a layer above the page

This component renders a full page state used for onboarding or promotion.

An expandable is used to reveal or hide content in a container.

Inline is used to produce even spacing between inline elements.

Used to represent code in an inline context such as a paragraph of text.

A component used to render a key and value pair.

The layout component produces common page layouts found in the SparkPost app.

A list box is an input element for users to select one option of many.

A modal is an overlay component that requires the user's attention.

This component renders a full page layout with common elements such as a header, primary action, and breadcrumbs.

Pagination is used to split up large lists into smaller chunks across several pages.

A panel is a container used to group similar content, tasks, or operations together.

Use this component to render images

A popover is an overlay element used to hold dropdown menus or other interactive content.

Portals are used to render elements outside of a components context.

This component is used to visually represent a linear user flow with navigation capabilities

A progress bar visually represents the completion of a task or operation.

This component is used to represent a filter used in a search or query builder or a legend item used in data visualization

This component is used to indicate the user can select one option from a list of many

This component is used to indicate the user can select one option from a list of a few options

ScreenReaderOnly

Used to render elements that are visually hidden, but accessible to assistive technology.

A select is an input element for users to select one option of many.

Skeletons are used as a placeholder for content that during loading states.

A slider is an input element used to select a numerical value from within a constrained range.

Snackbars are used for real-time alerts or notifications

A spinner is used to represent a loading state.

Stack is a layout component used to maintain vertical rhythm.

A table is used to visually display lists of entities for comparison.

Tabs are used to navigate between views within a single page

Use a Tag to organize, label, or categorize keywords or objects.

Text is a primitive component that provides typographical system props.

Use a TextField when a user can input long or short form text entries.

Themeprovider provides theme and styling context for your application.

Use this component to toggle between enabled and disabled states.

A tooltip is a floating element that provides the user with additional information or guidance.

A component that renders inline links.

Use this component to embed video assets

useCopyToClipboard

usePrefersReducedMotion

useResizeObserver