Updated May 25, 2021

Matchbox 5.0.0


Breaking Changes

  • Props are no longer spread to underlying DOM elements for the following components:
    • All Table components
    • ActionList
    • Banner
    • Expandable
    • Modal
    • Pager
    • ProgressBar
    • Snackbar
    • Toggle
    • Tag
  • The is="checkbox" option has been removed from ActionList.Actions

New Features


A new component, Badge, has been added to visually identify numeric values

import { Badge } from '@sparkpost/matchbox';



A new component, Table.SortButton, has been added for sortable table headers.

import { Table } from '@sparkpost/matchbox';

    <Table.Row header>
        <Table.SortButton direction="asc">Heading 1</Table.SortButton>
        <Table.SortButton direction="desc">Heading 2</Table.SortButton>
        <Table.SortButton>Heading 3</Table.SortButton>


A new component, TimelineTabs, has been added to represent events in chronological order.

import { TimelineTabs } from '@sparkpost/matchbox';

    <Tag>Tab 1</Tag>
    <Tag>Tab 2</Tag>

Other New Features and Enhancements

  • labelHidden is now supported by Select
  • Tabs now support component wrappers via as
  • A new font size token has been added for 12px, font-size-50
  • An appearance prop has been added to the LabelValue component to invert font color, and accepts either inverted or default.
  • An appearance prop has been added to the Panel component to invert background and font color, and accepts either inverted or default.
  • Supports React 17
  • Drawer now accepts any children, not just Drawer components
  • Modal now accepts any children, not just Modal components
  • Refs are now forwarded to all Table components
  • Skeletons are now hidden from screen readers
  • Tabs focus state has been improved and now makes use of focus-visible with a fallback

Bug Fixes

  • Disabled checkboxes should no longer respond to cursor hover events
  • Panel Sections should no longer crash without children
  • Fixed the order of error and help text below input components
  • Resolves a number of security vulnerabilities