Matchbox 5.0.0

2021 April 2nd


For a full list of updates, view the release notes on Github.


  • 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

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

import { Badge } from '@sparkpost/matchbox';
<Badge>+100</Badge>;

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

import { Table } from '@sparkpost/matchbox';
<Table>
<thead>
<Table.Row header>
<Table.HeaderCell>
<Table.SortButton direction="asc">Heading 1</Table.SortButton>
</Table.HeaderCell>
<Table.HeaderCell>
<Table.SortButton direction="desc">Heading 2</Table.SortButton>
</Table.HeaderCell>
<Table.HeaderCell>
<Table.SortButton>Heading 3</Table.SortButton>
</Table.HeaderCell>
</Table.Row>
</thead>
</Table>;

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

import { TimelineTabs } from '@sparkpost/matchbox';
<TimelineTabs>
<TimelineTabs.Tab>
<Tag>Tab 1</Tag>
</TimelineTabs.Tab>
<TimelineTabs.Tab>
<Tag>Tab 2</Tag>
</TimelineTabs.Tab>
</TimelineTabs>;

  • 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
  • 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