Matchbox

Components

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

ActionList
Use an ActionList to provide the user with a set of tasks or operations
Badge
A badge is used to display numerical values.
Banner
A banner is used to display prominent information to the user.
Box
Box is a primitive component that provides all available system props.
Breadcrumb
Breadcrumbs are a navigation component that provide context of the user's location in the application
Button
A button is an interactive element that triggers an event or initiates an action.
Checkbox
A checkbox is a input element that allows users to select zero or more options.
Columns
Columns is a component used to create flexible layouts.
DatePicker
A datepicker allows users to select dates or date ranges from a calendar.
Drawer
A drawer is a container for content on a layer above the page
EmptyState
This component renders a full page state used for onboarding or promotion.
Expandable
An expandable is used to reveal or hide content in a container.
Inline
Inline is used to produce even spacing between inline elements.
InlineCode
Used to represent code in an inline context such as a paragraph of text.
LabelValue
A component used to render a key and value pair.
Layout
The layout component produces common page layouts found in the SparkPost app.
ListBox
A list box is an input element for users to select one option of many.
Modal
A modal is an overlay component that requires the user's attention.
Page
This component renders a full page layout with common elements such as a header, primary action, and breadcrumbs.
Pagination
Pagination is used to split up large lists into smaller chunks across several pages.
Panel
A panel is a container used to group similar content, tasks, or operations together.
Picture
Use this component to render images
Popover
A popover is an overlay element used to hold dropdown menus or other interactive content.
Portal
Portals are used to render elements outside of a components context.
ProgressBar
A progress bar visually represents the completion of a task or operation.
Radio
This component is used to indicate the user can select one option from a list of many
RadioCard
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.
Select
A select is an input element for users to select one option of many.
Skeleton
Skeletons are used as a placeholder for content that during loading states.
Slider
A slider is an input element used to select a numerical value from within a constrained range.
Snackbar
Snackbars are used for real-time alerts or notifications
Spinner
A spinner is used to represent a loading state.
Stack
Stack is a layout component used to maintain vertical rhythm.
Table
A table is used to visually display lists of entities for comparison.
Tabs
Tabs are used to navigate between views within a single page
Tag
Use a Tag to organize, label, or categorize keywords or objects.
Text
Text is a primitive component that provides typographical system props.
TextField
Use a TextField when a user can input long or short form text entries.
ThemeProvider
Themeprovider provides theme and styling context for your application.
TimelineTabs
Toggle
Use this component to toggle between enabled and disabled states.
Tooltip
A tooltip is a floating element that provides the user with additional information or guidance.
UnstyledLink
A component that renders inline links.
Video
Use this component to embed video assets
buttonReset
focusOutline
useBreakpoint
useCopyToClipboard
useDrawer
useInView
useModal
usePrefersReducedMotion
useResizeObserver
useTabs
useWindowEvent
visuallyHidden