25.0.0

@metamask/design-system-react 0.11.0

Added

• Added ButtonFilter component for filter button functionality (#964)
• Added BannerBase component for creating custom banner notifications (#961)

Changed

• BREAKING: Updated ButtonIcon API to use variant prop instead of isInverse and isFloating boolean props (#948)
  • Removed isInverse and isFloating props
  • Added variant prop with three options: ButtonIconVariant.Default (default), ButtonIconVariant.Filled (new muted background with rounded corners), and ButtonIconVariant.Floating (replaces isFloating behavior)
  • Migration: Replace isFloating={true} with variant={ButtonIconVariant.Floating}, and use variant={ButtonIconVariant.Default} for standard transparent background
  • See Migration Guide for complete migration instructions
• Updated Ai icon to filled version for visual consistency (#970)

@metamask/design-system-react-native 0.11.0

Added

• Added ButtonFilter component for filter button functionality (#964)
• Added BottomSheet component for modal bottom sheet interactions (#963)
• Added MainActionButton component for primary call-to-action buttons (#952)
• Added BannerBase component for creating custom banner notifications (#955)
• Added ListItem component for standardized list rows (#958)
• Added TabEmptyState component for empty tab state displays (#949)
• Added BottomSheetDialog component for bottom sheet dialog interactions (#905)

Changed

• BREAKING: Updated ButtonIcon API to use variant prop instead of isInverse and isFloating boolean props (#948)
  • Removed isInverse and isFloating props
  • Added variant prop with three options: ButtonIconVariant.Default (default), ButtonIconVariant.Filled (new muted background with rounded corners), and ButtonIconVariant.Floating (replaces isFloating behavior)
  • Migration: Replace isFloating={true} with variant={ButtonIconVariant.Floating}, and use variant={ButtonIconVariant.Default} for standard transparent background
  • See Migration Guide for complete migration instructions
• BREAKING: Input component now requires value prop and is controlled-only (#960)
  • Removed defaultValue prop - all Input instances must now pass a value prop and manage state via onChange
  • This change affects all components using Input directly, including TextField
  • Migration: Convert uncontrolled inputs to controlled by adding state management with value and onChange props
  • See Migration Guide for complete migration instructions
• Updated Ai icon to filled version for visual consistency (#970)

Fixed

• Fixed iOS placeholder alignment issue in Input component without affecting typed text rendering (#960)
• Fixed missing component exports in package entry point (#967)

@metamask/design-system-shared 0.4.0

Added

• Added shared ButtonFilter types and constants for cross-package reuse (#964)
  • Added ButtonFilterVariant const object with derived string union type (primary, secondary)
  • Added ButtonFilterPropsShared as the shared base props contract used by React and React Native implementations
• Added shared BannerBase types and constants for cross-package reuse (#955)
  • Added BannerBaseSeverity const object with derived string union type for severity variants
  • Added BannerBasePropsShared as the shared base props contract used by React and React Native implementations

24.0.0

@metamask/design-system-react 0.10.0

Changed

• BREAKING: Updated BadgeCount type exports to use the ADR-0003/ADR-0004 const-object + string-union pattern instead of TypeScript enums (#942)
  • BadgeCountSize is now provided as a const object with a derived union type rather than an enum
  • BadgeCount shared prop types are now sourced from @metamask/design-system-shared
  • Migration: update any enum-specific usage to const-object/union usage, while continuing to import from @metamask/design-system-react

@metamask/design-system-react-native 0.10.0

Added

• Added ActionListItem component for standardized list row actions (#951)
• Added SensitiveText component for sensitive value display and reveal interactions (#922)
• Added ButtonSemantic component for semantic intent button variants (#950)
• Added BottomSheetHeader component for consistent bottom sheet header layouts (#927)
• Added ButtonHero to @metamask/design-system-react-native (#934)

Changed

• BREAKING: Updated BadgeCount type exports to use the ADR-0003/ADR-0004 const-object + string-union pattern instead of TypeScript enums (#942)
  • BadgeCountSize is now provided as a const object with a derived union type rather than an enum
  • BadgeCount shared prop types are now sourced from @metamask/design-system-shared
  • Migration: update any enum-specific usage to const-object/union usage, while continuing to import from @metamask/design-system-react-native

@metamask/design-system-shared 0.3.0

Added

• Added shared BadgeCount types and constants for cross-package reuse (#942)
  • Added BadgeCountSize const object and derived BadgeCountSize string union type
  • Added BadgeCountPropsShared as the shared base props contract used by React and React Native implementations

23.0.0

@metamask/design-system-react-native 0.9.0

Added

• Added TextField component for text input fields (#910)
  • Boxed, press-to-focus wrapper around Input component
  • Supports configurable sizes, optional start/end accessories
  • Includes error and disabled states with custom styling
  • Full accessibility support and comprehensive test coverage

@metamask/design-tokens 8.2.2

Changed

• Updated typography scale for improved text hierarchy (#936)
  • fontSize.5 increased from 18px to 20px, affecting HeadingMd, SectionHeading, BodyLg, and ButtonLabelLg typography tokens
  • SectionHeading on large screens now uses 24px (up from 20px) to maintain consistent hierarchy with HeadingMd
  • These tokens map to TextVariant.HeadingMd, TextVariant.SectionHeading, TextVariant.BodyLg, and TextVariant.ButtonLabelLg used in the Text component from both @metamask/design-system-react and @metamask/design-system-react-native packages
  • Typography documentation updated to reflect the refined sizes

22.0.0

@metamask/design-tokens 8.2.1

Changed

• Updated neutral grey palette (grey050-grey1000) to ensure consistent elevations and interactions across themes (#849)
  • Refined neutral color values for more perceptible uniform elevations
  • Improved hue consistency across muted shades
  • Updated background.muted, background.defaultHover, background.defaultPressed for better theme consistency
  • Aligned border and overlay colors with theme-appropriate values
  • Synchronized all design tokens (CSS, JS, Figma JSONs) with latest Figma specifications

21.0.0

@metamask/design-system-react 0.9.0

Changed

• BREAKING: Migrated BadgeStatus component from TypeScript enums to string union types with const objects (#912)
  • BadgeStatusStatus and BadgeStatusSize enums replaced with const objects and derived string union types
  • No migration required - continue importing from @metamask/design-system-react as usual
  • Const object values remain the same (e.g., BadgeStatusStatus.Active still works)
  • String literals now also accepted thanks to structural typing (e.g., 'active' works where BadgeStatusStatus.Active is expected)
  • We are still evaluating best practices for const objects vs string literals - use whichever approach works best for your codebase
  • This change implements ADR-0003 and ADR-0004

@metamask/design-system-react-native 0.8.0

Added

• Added RadioButton component for radio button form controls (#926)
  • Supports checked, disabled, read-only, and danger states
  • Full accessibility support with role="radio" and accessibilityState
  • Optional label rendering for improved usability

Changed

• BREAKING: Migrated BadgeStatus component from TypeScript enums to string union types with const objects (#912)
  • BadgeStatusStatus and BadgeStatusSize enums replaced with const objects and derived string union types
  • No migration required - continue importing from @metamask/design-system-react-native as usual
  • Const object values remain the same (e.g., BadgeStatusStatus.Active still works)
  • String literals now also accepted thanks to structural typing (e.g., 'active' works where BadgeStatusStatus.Active is expected)
  • We are still evaluating best practices for const objects vs string literals - use whichever approach works best for your codebase
  • This change implements ADR-0003 and ADR-0004
• Refactored BottomSheetFooter component location for better organization (#933)
  • Moved from BottomSheets/BottomSheetFooter/ to BottomSheetFooter/
  • Updated import paths and Storybook title
  • No breaking changes - all imports from package entry point continue to work

@metamask/design-system-shared 0.2.0

Added

• Added centralized BadgeStatus types and constants (#912)
  • BadgeStatusStatus const object with derived string union type for status variants (active, inactive, warning, danger, success)
  • BadgeStatusSize const object with derived string union type for size variants (sm, md, lg)
  • BadgeStatusPropsShared type interface for shared component props
  • Enables structural typing - both const object values (BadgeStatusStatus.Active) and string literals ('active') are now accepted
  • Implements ADR-0003 and ADR-0004

20.0.0

@metamask/design-system-react 0.8.0

Added

• Added CorporateFare icon to represent stocks (#920)
• Added Input component for text input fields (#909)

Changed

• BREAKING: Standardized non-icon enum runtime values to use kebab-case format (#894)
  • Enum values now use lowercase/kebab-case (e.g., 'primary' instead of 'Primary', 'top-right' instead of 'TopRight')
  • Migration likely not needed - continue using enum constants (e.g., ButtonVariant.Primary)
  • Migration needed only if your app persists or transmits these enum values (localStorage, databases, APIs)
  • This prepares for migration from enums to string union types per ADR #127
• Updated @metamask/utils peer dependency from 11.9.0 to 11.10.0 (#903)

@metamask/design-system-react-native 0.7.0

Added

• Added Label component for form labels and descriptive text (#907)
• Added HeaderBase component for consistent header layouts (#902)
• Added Skeleton component for loading states (#891)
• Added Card component for grouped content sections (#923)
• Added BottomSheetFooter component for bottom sheet actions (#899)
• Added Toast component for temporary notification messages (#892)
• Added Input component for text input fields (#909)
• Added CorporateFare icon to represent stocks (#920)
• Added BottomSheetOverlay component for modal bottom sheet interactions (#897)
  • Provides consistent overlay pattern for bottom sheet components
  • Includes press-to-dismiss functionality and accessibility features

Changed

• BREAKING: Standardized non-icon enum runtime values to use kebab-case format (#894)
  • Enum values now use lowercase/kebab-case (e.g., 'primary' instead of 'Primary', 'top-right' instead of 'TopRight')
  • Migration likely not needed - continue using enum constants (e.g., ButtonVariant.Primary)
  • Migration needed only if your app persists or transmits these enum values (localStorage, databases, APIs)
  • This prepares for migration from enums to string union types per ADR #127
• Updated component styling to use tw.style() instead of string-based twClassName for better type safety and conditional styling (#889)
• Updated @metamask/design-tokens peer dependency from ^8.1.0 to ^8.2.0 to support AnimationDuration enum used by BottomSheetOverlay
• Updated @metamask/utils peer dependency from 11.9.0 to 11.10.0 (#903)
• Reorganized peer dependencies for better dependency management (#901)

Fixed

• Fixed ButtonBase component sizing issues in flex layouts to prevent unexpected shrinking (#870)

@metamask/design-system-shared 0.1.3

Changed

• Updated @metamask/utils dependency from 11.9.0 to 11.10.0 (#903)

@metamask/design-tokens 8.2.0

Added

• Exported AnimationDuration enum for standardized animation timing values (#897)

19.0.0

@metamask/design-system-react 0.7.0

Added

• Added AfterHours, Popup, and Sidepanel icons (#898, #879)

@metamask/design-system-react-native 0.6.0

Added

• Added AfterHours icon (#879)

18.0.0

@metamask/design-system-react 0.6.1

Changed

• Updated @metamask/utils peer dependency from 11.8.1 to 11.9.0 (#867)

Fixed

• Updated ButtonIcon component icon sizes and border radius to match Figma design specifications (#873)
  • ButtonIcon.Sm now uses 20px icon (previously 16px)
  • ButtonIcon.Md now uses 24px icon (previously 20px)
  • ButtonIcon.Lg now uses 32px icon (previously 24px)
  • Non-floating border radius now uses 8px for improved visual consistency

@metamask/design-system-react-native 0.5.1

Changed

• Updated @metamask/utils peer dependency from 11.8.1 to 11.9.0 (#867)

Fixed

• Updated ButtonIcon component icon sizes and border radius to match Figma design specifications (#873)
  • ButtonIcon.Sm now uses 20px icon (previously 16px)
  • ButtonIcon.Md now uses 24px icon (previously 20px)
  • ButtonIcon.Lg now uses 32px icon (previously 24px)
  • Non-floating border radius corrected to 4px (previously 2px)

@metamask/design-system-shared 0.1.2

Changed

• Updated @metamask/utils dependency from 11.8.1 to 11.9.0 (#867)

17.0.0

@metamask/design-system-react 0.6.0

Added

• Add ButtonHero component for prominent call-to-action buttons in hero sections and landing pages (#843)
  • Extends base Button component with all standard ButtonBase props (variant, size, disabled, etc.) plus additional styling optimized for large, attention-grabbing CTAs
  • Import and use like standard Button: import { ButtonHero } from '@metamask/design-system-react'
  • Provides consistent, accessible hero button pattern across MetaMask applications
  • Fully typed with ButtonHeroProps interface

Changed

• Updated @metamask/utils peer dependency from 11.8.0 to 11.8.1 (#838)

@metamask/design-system-react-native 0.5.0

Changed

• BREAKING: Update font file names from space-separated to hyphenated PostScript format for iOS Metro bundler compatibility (#862)
  • Font file names changed: "Geist Regular.otf" → "Geist-Regular.otf", "Geist Medium.otf" → "Geist-Medium.otf", "Geist Bold.otf" → "Geist-Bold.otf"
  • Fixes Metro bundler asset resolution issues on iOS that prevented fonts from loading correctly
  • If using @metamask/design-system-react-native components as intended, fonts automatically load correctly with no migration needed
  • If manually referencing font file paths in custom code, update all references to use hyphenated file names instead of space-separated names
  • Android is unaffected by this change
• Updated @metamask/utils peer dependency from 11.8.0 to 11.8.1 (#838)

Fixed

• Export missing TextButtonSize enum from package entry point for TypeScript type safety (#848)
  • The TextButtonSize enum is now properly exported and accessible for imports
  • Developers can now use typed enums instead of string literals: import { TextButton, TextButtonSize } from '@metamask/design-system-react-native' and <TextButton size={TextButtonSize.Medium} />
  • This is a non-breaking, additive change that improves type safety

@metamask/design-system-twrnc-preset 0.3.0

Changed

• BREAKING: Update font family names from space-separated to hyphenated PostScript format for iOS Metro bundler and expo-font compatibility (#862)
  • Font family names changed: "Geist Regular" → "Geist-Regular", "Geist Medium" → "Geist-Medium", "Geist Bold" → "Geist-Bold"
  • Fixes critical font loading issues on iOS when using Metro bundler with expo-font
  • If using TWRNC preset via @metamask/design-system-react-native components, fonts automatically use correct names with no migration needed
  • If directly referencing font families in custom TWRNC styles, update to hyphenated names (e.g., twfont-['Geist-Regular'] instead of twfont-['Geist_Regular'])
  • Android is unaffected by this change
  • Aligns with MetaMask Mobile's font configuration and expo-font requirements

16.0.0

@metamask/design-system-react 0.5.0

Added

• Added asChild functionality to Box component (#834)