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.
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.
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.
A progress bar visually represents the completion of a task or operation.
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
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