@metamask/design-system-react 0.26.0

Added

• Added Tag component for categorization and filtering labels (#1211)
• Added Toast component with Toaster provider and imperative toast() API for non-blocking notifications (#1190)

Changed

• BREAKING: TextButton API aligned with React Native — size/TextButtonSize replaced by variant/TextVariant; isInverse, isDisabled, textProps, start/end icons, and accessory slots removed; asChild added for semantic link composition (#1224)
  • See Migration Guide
• BREAKING: AvatarIconSeverity.Error renamed to AvatarIconSeverity.Danger; severity vocabulary standardized to use Danger for destructive/critical states and Neutral for default states (#1159)
  • See Migration Guide

Fixed

• Fixed Toast to support toast() calls made before Toaster mounts (#1217)

@metamask/design-system-react-native 0.29.0

Added

• Added ListItem component for list row layouts (#1203)

Changed

• BREAKING: AvatarIconSeverity.Error, IconAlertSeverity.Error, and TagSeverity.Error renamed to .Danger; severity vocabulary standardized to use Danger for destructive/critical states and Neutral for default states (#1159)
  • See Migration Guide

@metamask/design-system-shared 0.22.0

Added

• Added ListItemPropsShared and related shared types for cross-platform ListItem support (#1203)
• Added ToastPropsShared, ToastSeverity, and Toast animation constants to shared package, consolidating the Toast type definitions used by React and React Native (#1190)
• Added TextButtonPropsShared to align TextButton API across React and React Native (#1224)
• Added AvatarNetworkSize as a named export from the shared package (#1225)

Changed

• BREAKING: AvatarIconSeverity.Error, IconAlertSeverity.Error, and TagSeverity.Error renamed to .Danger; severity vocabulary standardized to use Danger for destructive/critical states (#1159)

@metamask/design-system-react 0.25.0

Added

• Added Popover for anchored overlays such as menus, tooltips, and dialogs (#1153)
• Added TextArea for controlled multiline text entry (#1036)
• Added TextFieldSearch for controlled search-field flows on top of TextField (#1171)
• Added FormTextField for labeled form controls built from Label, TextField, and HelpText (#1197)

Changed

• BREAKING: Dropped Node.js 18 support for the release line; consumers must run Node 20 or newer (#1206)
• Updated avatar fallback handling so AvatarToken, AvatarNetwork, and AvatarFavicon resolve consistently when the requested image is unavailable (#1212)

@metamask/design-system-react-native 0.28.0

Added

• Added Content for composing scrollable and padded content sections on React Native screens; it is closely related to the upcoming ListItem work (#1192)

Changed

• BREAKING: Dropped Node.js 18 support for the release line; consumers must run Node 20 or newer (#1206)
• Added default padding and isInteractive support to SectionHeader so section rows match the new mobile layout patterns (#1210)
• BREAKING: Flattened TextArea so it renders the root TextInput directly; pass TextInput props on TextArea, use the component ref for the input, and stop relying on inputProps or inputElement (#1205)
• Updated avatar fallback handling so AvatarToken, AvatarNetwork, and AvatarFavicon resolve consistently when the requested image is unavailable (#1212)

@metamask/design-system-shared 0.21.0

Added

• Added ContentPropsShared and ContentVerticalAlignment so React Native can compose list-style rows and related layout patterns (#1192)

Changed

• BREAKING: Dropped Node.js 18 support for the release line; no public API changes were needed in @metamask/design-system-shared, but consumers must run on Node 20 or newer (#1206)
• BREAKING: Updated TextAreaPropsShared to remove inputElement so React Native TextArea can render the root TextInput directly (#1205)

@metamask/design-system-tailwind-preset 0.9.0

Changed

• BREAKING: Dropped Node.js 18 support for the release line; no Tailwind preset behavior changed, but consumers must run on Node 20 or newer (#1206)

@metamask/design-system-twrnc-preset 0.5.0

Changed

• BREAKING: Dropped Node.js 18 support for the release line; no TWRNC preset behavior changed, but consumers must run on Node 20 or newer (#1206)

@metamask/design-tokens 8.5.0

Changed

• BREAKING: Dropped Node.js 18 support for the release line; the emitted token values and CSS output are unchanged, but consumers must run on Node 20 or newer (#1206)

@metamask/design-system-react 0.24.0

Added

• Added TextField for labeled text entry with optional helper and validation text, exposing TextFieldSize and TextFieldType (#1170)
• Added FlashFilled icon (filled lightning bolt) to IconName (#1191)

@metamask/design-system-react-native 0.27.0

Added

• Added FlashFilled icon (filled lightning bolt) to IconName (#1191)
• Added SelectButtonSize so SelectButton exposes a semantic size type (#1177)

Changed

• BREAKING: Removed panGestureHandlerProps from BottomSheet and BottomSheetDialog following the migration to the react-native-gesture-handler v2 GestureDetector/Gesture.Pan() API (#1165)
  • See Migration Guide
• BREAKING: Removed the variant-based title API from HeaderBase and BottomSheetHeader (#1103)
  • Removed variant, HeaderBaseVariant, and BottomSheetHeaderVariant, plus HeaderBase's titleTestID
  • String titles now render with a centered HeadingSm treatment; pass custom children for bespoke title layouts and use textProps.testID in place of titleTestID
  • See Migration Guide
• Reduced the default SegmentGroup segment spacing from gap-3 to gap-1 for tighter grouped segments (#1194)

Fixed

• Fixed a HeaderStandardAnimated runtime crash under React Native Reanimated 4 by inlining the scroll-handler worklet (#1185)
• Fixed React Native Web rendering for BottomSheet, BottomSheetOverlay, Icon, and the animated ButtonAnimated and Spinner components (#1187)

@metamask/design-system-shared 0.20.0

Added

• Added FlashFilled icon (filled lightning bolt) to IconName, keeping the centralized icon set aligned across React and React Native (#1191)
• Added SelectButtonSize so SelectButton exposes a semantic size type shared across platforms (#1177)
• Added TextFieldPropsShared for the cross-platform text field input contract (#1170)

@metamask/design-system-react 0.23.1

Changed

• Updated the Telegram icon asset to match the official Telegram logo (#1176)

@metamask/design-system-react-native 0.26.0

Added

• Added TitleAlert for alert-style headings with a severity icon, title row, and optional description in modals, bottom sheets, and other compact surfaces (#1131)
• Added SectionHeader for section titles with optional start and end accessories, icon shortcuts, and an inline title accessory (#1175)
• Added SectionDivider as a horizontal rule with a muted top border and default vertical spacing for separating screen sections (#1174)

Changed

• Updated the Telegram icon asset to match the official Telegram logo (#1176)

@metamask/design-system-shared 0.19.0

Added

• Exported TitleAlertPropsShared for cross-platform alert title layouts (#1131)
• Exported SectionHeaderPropsShared for cross-platform section heading layouts (#1175)

Changed

• Updated the shared Telegram icon asset to match the official Telegram logo so React and React Native stay aligned (#1176)

@metamask/design-system-react 0.23.0

Added

• Added PopoverHeader for popover title rows and trailing actions, aligned with MetaMask extension screen patterns (#1158)
• Added ModalHeader for modal title rows and accessory slots, aligned with MetaMask extension screen patterns (#1144)
• Added Label for accessible captions paired with form controls (#1152)
• Added SensitiveText for masking and revealing sensitive strings (addresses, secrets, recovery phrases) with configurable visible length (#1164)
• Added HelpText for helper, success, warning, and error copy beneath inputs and other controls (#1169)

Changed

• ButtonBase now derives label typography, start and end icon sizes, and internal spacing from the size prop for every supported ButtonBaseSize, keeping defaults aligned without manual per-size tuning (#1150)
  • If you wrap ButtonBase and override label, icon, or spacing, see Migration guide.
• BannerBase close control behavior is simplified and aligned with the shared dismiss contract (#1166)

@metamask/design-system-react-native 0.25.0

Added

• Added SelectButton, SegmentButton, and SegmentGroup for option rows, single-choice segments, and grouped segment controls (#1172)
• Added SensitiveText for masking and revealing sensitive strings, matching the cross-platform contract used on web (#1164)
• Added HeaderStandardAnimated and useHeaderStandardAnimated for standard headers with coordinated scroll-driven motion (#1151)
• Added TextArea for multi-line text entry (#1141)

Changed

• ButtonBase now derives label typography, start and end icon sizes, and internal spacing from the size prop for every supported ButtonBaseSize, keeping defaults aligned without manual per-size tuning (#1150)
  • If you wrap ButtonBase and override label, icon, or spacing, see Migration guide.
• BannerBase close control behavior is simplified and aligned with the shared dismiss contract (#1166)

@metamask/design-system-shared 0.18.0

Added

• Exported SelectButton prop and variant types (SelectButtonPropsShared, SelectButtonVariant, SelectButtonEndArrow), SegmentGroupPropsShared, and SegmentGroupContext so mobile and web packages share one segment and select contract (#1172)
• Exported SensitiveTextLength, SensitiveTextPropsShared, and related types for cross-platform masking and reveal behavior (#1164)
• Exported HelpTextSeverity, HelpTextPropsShared, and related types for cross-platform helper and validation text (#1169)
• Exported TextAreaPropsShared for cross-platform multi-line input wrappers (#1141)

@metamask/design-system-react 0.22.0

Added

• Added Modal and useModalContext for composing modal dialogs with focus management and the same layout patterns used in the MetaMask extension migration (#1136)
• Added ModalContent (with ModalContentSize and MODAL_CONTENT_IGNORE_OUTSIDE_CLICK_ATTR) for sized modal bodies, entrance motion, and outside-click handling aligned with that migration (#1139)
• Added Skeleton for loading placeholders (#1146)
• Added HeaderBase for flexible header layouts when migrating extension screens into the design system (#1142)
• Added ListArrow, Musd, and MusdFilled icons; refreshed Candlestick; and added Group, PieChart, and Predictions icons (#1157, #1161, #1162, #1163)

@metamask/design-system-react-native 0.24.0

Added

• Added ListArrow, Musd, and MusdFilled icons; refreshed Candlestick; and added Group, PieChart, and Predictions icons (same names as in @metamask/design-system-react) (#1157, #1161, #1162, #1163)

Changed

• BREAKING: Tightened the Toast API shipped with Toaster in 0.23.0 (#1143)
  • toast.show → toast(...); toast.hide → toast.dismiss()
  • iconProps renamed to iconAlertProps
  • ToastSeverity.Info removed; use Default, Success, Warning, or Danger
  • hasNoTimeout is optional and defaults to auto-dismiss unless set to true
  • Close control is always shown on the toast surface
  • See Migration Guide
• Expanded HeaderBase migration guidance for apps moving off the mobile component library (#1100)

@metamask/design-system-shared 0.17.0

Added

• Added ListArrow, Musd, and MusdFilled to the shared icon exports; refreshed Candlestick; and added Group, PieChart, and Predictions so React and React Native stay aligned on IconName (#1157, #1161, #1162, #1163)

@metamask/design-system-tailwind-preset 0.8.0

Added

• Added animate-skeleton-pulse (keyframes skeleton-pulse) for the design-system Skeleton loading bar (#1146)
• Added animate-slide-up (keyframes slide-up) for ModalContent dialog entrance motion (#1139)

@metamask/design-system-react 0.21.0

Added

• Added Merge to the icon set so it can be used anywhere IconName is supported in @metamask/design-system-react (#1155)
• Added ModalOverlay, ModalBody, ModalFocus, and ModalFooter to help Extension consumers migrate modal building blocks into @metamask/design-system-react (#1120, #1121, #1128, #1132)

Changed

• Updated Input to use the shared cross-platform API. Consumers should pass a controlled value, use isReadOnly as the readonly prop name, and stop relying on defaultValue as part of the public component contract (#1043)
• Updated AvatarGroup to use shared cross-platform size and variant contracts, keeping React and React Native aligned on the same public API names and values (#1067)

@metamask/design-system-react-native 0.23.0

Added

• Added Merge to the icon set so it can be used anywhere IconName is supported in @metamask/design-system-react-native (#1155)

Changed

• BREAKING: Redesigned Toast to use a single mounted <Toast /> plus static Toast.show(...) and Toast.hide() methods for application usage (#1104)
  • Removed ToastContext, ToastContextWrapper, and ToastContextParams from the public export surface
  • Renamed ToastVariants to ToastVariant, changed icon-only close buttons to ToastCloseButtonVariant.Icon, and renamed customBottomOffset to bottomOffset
  • Toast.show() and Toast.hide() now throw a descriptive error if called before <Toast /> mounts
  • See Migration Guide
• Updated Input to use the shared cross-platform API. Consumers should pass a controlled value, replace isReadonly with isReadOnly, and use the shared state-style behavior expected by wrappers like TextField (#1043)
• Updated AvatarGroup to use shared cross-platform size and variant contracts, keeping React and React Native aligned on the same public API names and values (#1067)

@metamask/design-system-shared 0.16.0

Added

• Added Merge to the shared icon exports so React and React Native consumers can access it through their existing IconName APIs (#1155)
• Added shared Input contracts for a controlled value, isReadOnly, and isStateStylesDisabled, making it easier to build cross-platform wrappers against one public input API (#1043)
• Added shared AvatarGroup size, variant, and prop contracts for consumers building cross-platform abstractions on top of @metamask/design-system-shared (#1067)

@metamask/design-system-tailwind-preset 0.7.0

Added

• Added a fade-in animation utility so consumers can use animate-fade-in for simple opacity entrance transitions, including the new ModalOverlay web migration path (#1120)

Changed

• Clarified the migration path for consumers moving to Tailwind CSS v4. Existing Tailwind v3 projects can keep using this preset, while Tailwind v4 projects should move to @metamask/design-tokens/tailwind/theme.css instead (#1117)

@metamask/design-tokens 8.4.0

Added

• Added @metamask/design-tokens/tailwind/theme.css for Tailwind CSS v4, giving consumers a single import for MetaMask token variables, theme values, typography utilities, font utilities, and shadow utilities. See the migration guide for upgrade steps (#1117)

@metamask/design-system-react 0.20.0

Changed

• BREAKING: Updated Button, ButtonBase, and ButtonHero size and variant exports to use shared const-object + string-union types rather than platform-local enum-based definitions, aligning React with the shared cross-platform type contracts (#1034)
  • No migration required for typical usage; continue importing from @metamask/design-system-react as before.
  • Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
• BREAKING: Updated ButtonIconSize and ButtonIconVariant to use shared const-object + string-union types rather than platform-local enum-based definitions, aligning React with the shared cross-platform type contracts (#1038)
  • No migration required for typical usage; continue importing from @metamask/design-system-react as before.
  • Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
• Updated Figma Code Connect to the live MMDS Components file and aligned ButtonIcon and TextButton mappings with the current component APIs shown in Dev Mode (#1109)
• Expanded the TextButton migration guide for extension consumers replacing ButtonLink and ButtonVariant.Link with the current design-system APIs (#1098)

@metamask/design-system-react-native 0.22.0

Changed

• BREAKING: Updated Button, ButtonBase, and ButtonHero size and variant exports to use shared const-object + string-union types rather than platform-local enum-based definitions, aligning React Native with the shared cross-platform type contracts (#1034)
  • No migration required for typical usage; continue importing from @metamask/design-system-react-native as before.
  • Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
• BREAKING: Updated ButtonIconSize and ButtonIconVariant to use shared const-object + string-union types rather than platform-local enum-based definitions, aligning React Native with the shared cross-platform type contracts (#1038)
  • No migration required for typical usage; continue importing from @metamask/design-system-react-native as before.
  • Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.
• BREAKING: TextField and TextFieldSearch now use a root Box/View, require native TextInput props under inputProps, rename isReadonly to isReadOnly, and use inputRef for the inner input ref. See Migration Guide (#1081)
• Updated Figma Code Connect to the live MMDS Components file and aligned ButtonIcon and TextButton mappings with the current component APIs shown in Dev Mode (#1109)

@metamask/design-system-shared 0.15.0

Added

• Added shared ButtonBaseSize, ButtonSize, ButtonHeroSize, ButtonVariant, ButtonBasePropsShared, and ButtonPropsShared exports so React and React Native button APIs can share one cross-platform type contract (#1034)
• Added shared ButtonIconSize, ButtonIconVariant, and ButtonIconPropsShared exports so React and React Native ButtonIcon APIs can share one cross-platform type contract (#1038)
• Added shared TextFieldPropsShared for the controlled text-field contract used by TextField and TextFieldSearch across platform packages (#1081)

@metamask/design-system-react 0.19.0

Added

• Added Telegram to the IconName set for use anywhere the React package accepts design system icons (#1122)

Changed

• BREAKING: Updated AvatarIcon exports to use shared const-object + string-union types rather than local enum-based definitions, aligning React with the shared cross-platform type contracts (#996)
  • No migration required for typical usage; continue importing from @metamask/design-system-react as before.
  • Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.

@metamask/design-system-react-native 0.21.0

Added

• Added Telegram to the IconName set for use anywhere the React Native package accepts design system icons (#1122)

Changed

• BREAKING: Updated AvatarIcon exports to use shared const-object + string-union types rather than local enum-based definitions, aligning React Native with the shared cross-platform type contracts (#996)
  • No migration required for typical usage; continue importing from @metamask/design-system-react-native as before.
  • Runtime values remain stable while type definitions follow ADR-0003/ADR-0004.

@metamask/design-system-shared 0.14.0

Added

• Added Telegram to the shared icon exports so both platform packages can consume it through their existing IconName APIs (#1122)
• Added shared BadgeIconPropsShared types so BadgeIcon now uses one cross-platform prop contract in React and React Native (#1010)
• Added shared AvatarIcon contracts, including AvatarIconPropsShared, AvatarIconSize, and AvatarIconSeverity, so both platform packages consume the same canonical type definitions (#996)

@metamask/design-system-react 0.18.0

Changed

• BREAKING: Updated IconName, IconColor, and IconSize exports to use const-object + string-union types instead of local enums; existing imports from @metamask/design-system-react continue to work, but enum-specific type assumptions may need updating (#1042, #1101)
  • See Migration Guide
• BREAKING: Updated Box type exports (BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor, BoxSpacing, BoxBorderWidth) to use const-object + string-union types, and removed stale Box color entries that no longer map to design tokens (#1026)
  • Removed BoxBackgroundColor.WarningAlternative, BoxBackgroundColor.SuccessAlternative, BoxBorderColor.WarningAlternative, BoxBorderColor.SuccessAlternative, and BoxBorderColor.InfoAlternative
  • See Migration Guide
• Updated ButtonTertiary to use the default text color for more consistent contrast across states (#1099)

@metamask/design-system-react-native 0.20.0

Added

• Added TitleStandard for mobile title layouts with optional top and bottom accessory rows (#1051)
• Added TitleSubpage for subpage headers with avatar, title, subtitle, amount, and bottom-label layouts (#1059)
• Added Tag for compact severity-based metadata labels with optional icons or custom accessories (#1053)

Changed

• Box now forwards refs to the underlying View, which makes imperative measurement and focus flows easier to integrate (#1102)
• Updated ButtonTertiary to use the default text color for more consistent contrast across states (#1099)
• BREAKING: Updated IconName, IconColor, and IconSize exports to use const-object + string-union types instead of local enums; existing imports from @metamask/design-system-react-native continue to work, but enum-specific type assumptions may need updating (#1042)
  • See Migration Guide
• BREAKING: Updated Box type exports (BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor, BoxSpacing, BoxBorderWidth) to use const-object + string-union types, and removed stale Box color entries that no longer map to design tokens (#1026)
  • Removed BoxBackgroundColor.WarningAlternative, BoxBackgroundColor.SuccessAlternative, BoxBorderColor.WarningAlternative, BoxBorderColor.SuccessAlternative, and BoxBorderColor.InfoAlternative
  • See Migration Guide

@metamask/design-system-shared 0.13.0

Added

• Added TitleStandardPropsShared and TitleSubpagePropsShared for shared header composition across platform packages (#1051, #1059)
• Added TagSeverity and TagPropsShared for shared Tag contracts consumed by platform packages (#1053)

Changed

• BREAKING: Updated shared Box exports (BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor, BoxSpacing, BoxBorderWidth, BoxPropsShared) from enums to const objects with derived string unions (#1026)
  • Removed BoxBackgroundColor.WarningAlternative, BoxBackgroundColor.SuccessAlternative, BoxBorderColor.WarningAlternative, BoxBorderColor.SuccessAlternative, and BoxBorderColor.InfoAlternative
  • See Migration Guide
• BREAKING: Updated shared Icon exports (IconName, IconColor, IconSize, IconPropsShared) to use const objects with derived string unions and made @metamask/design-system-shared the source of truth for icon names and assets across React and React Native (#1042)
  • See Migration Guide