## Release 44.0.0
This release adds `Toast`/`Toaster` and `Tag` to React, `ListItem` to
React Native, aligns the `TextButton` API across platforms, and
standardizes severity vocabulary (`Error` → `Danger`) across
`AvatarIcon`, `IconAlert`, and `Tag`.
### 📦 Package Versions
- `@metamask/design-system-shared`: **0.22.0**
- `@metamask/design-system-react`: **0.26.0**
- `@metamask/design-system-react-native`: **0.29.0**
### 🔄 Shared Type Updates (0.22.0)
#### New shared types (#1190, #1203, #1224, #1225)
**What Changed:**
- Added `ToastPropsShared` and `ToastSeverity` for cross-platform
`Toast` support
- Added `ListItemPropsShared` and related types for cross-platform
`ListItem` support
- Added `TextButtonPropsShared` to align `TextButton` API across React
and React Native
- Added `AvatarNetworkSize` as a named export from the shared package
**Impact:**
- Enables consistent `Toast` and `ListItem` implementations across both
platforms
- Continues ADR-0003/0004 const-object + string-union pattern adoption
#### Severity vocabulary: `.Error` → `.Danger`
([#1159](#1159))
**What Changed:**
- `AvatarIconSeverity.Error` → `AvatarIconSeverity.Danger`
- `IconAlertSeverity.Error` → `IconAlertSeverity.Danger`
- `TagSeverity.Error` → `TagSeverity.Danger`
**Impact:**
- Breaking change for any consumer using `.Error` on these three const
objects. Rendered colors are unchanged.
### 🌐 React Web Updates (0.26.0)
#### Added
- Added `Tag` component for categorization and filtering labels
([#1211](#1211))
- Added `Toast` component with `Toaster` provider and imperative
`toast()` API
([#1190](#1190))
#### Changed
- **BREAKING:** `TextButton` API aligned with React Native —
`size`/`TextButtonSize` replaced by `variant`/`TextVariant`;
`isInverse`, `isDisabled`, `textProps`, and icon/accessory props
removed; `asChild` added
([#1224](#1224))
- **BREAKING:** `AvatarIconSeverity.Error` → `AvatarIconSeverity.Danger`
([#1159](#1159))
#### Fixed
- Fixed `Toast` to support `toast()` calls made before `Toaster` mounts
([#1217](#1217))
### 📱 React Native Updates (0.29.0)
#### Added
- Added `ListItem` component for list row layouts
([#1203](#1203))
- Added `Toast` component with `Toaster` provider and imperative
`toast()` API
([#1190](#1190))
#### Changed
- **BREAKING:** `AvatarIconSeverity.Error`, `IconAlertSeverity.Error`,
and `TagSeverity.Error` → `.Danger`
([#1159](#1159))
### ⚠️ Breaking Changes
#### TextButton rewrite (React Web Only)
**What Changed:**
- `size` / `TextButtonSize` removed — use `variant` / `TextVariant`
instead
- `isInverse`, `isDisabled`, `textProps`, start/end icons, and accessory
slots removed
- `asChild` added for semantic link composition
**Migration:**
```tsx
// Before (0.25.0)
import { TextButton, TextButtonSize } from '@metamask/design-system-react';
<TextButton size={TextButtonSize.BodySm}>Learn more</TextButton>
// After (0.26.0)
import { TextButton } from '@metamask/design-system-react';
import { TextVariant } from '@metamask/design-system-shared';
<TextButton variant={TextVariant.BodySm}>Learn more</TextButton>
```
See [React Migration
Guide](./packages/design-system-react/MIGRATION.md#from-version-0250-to-0260)
#### Severity vocabulary: `.Error` → `.Danger` (Both Platforms)
**What Changed:**
- `AvatarIconSeverity.Error` → `AvatarIconSeverity.Danger` (React +
React Native)
- `IconAlertSeverity.Error` → `IconAlertSeverity.Danger` (React Native)
- `TagSeverity.Error` → `TagSeverity.Danger` (React Native)
**Migration:**
```tsx
// Before
<AvatarIcon severity={AvatarIconSeverity.Error} />
<IconAlert severity={IconAlertSeverity.Error} />
<Tag severity={TagSeverity.Error}>High risk</Tag>
// After
<AvatarIcon severity={AvatarIconSeverity.Danger} />
<IconAlert severity={IconAlertSeverity.Danger} />
<Tag severity={TagSeverity.Danger}>High risk</Tag>
```
See migration guides for complete instructions:
- [React Migration
Guide](./packages/design-system-react/MIGRATION.md#from-version-0250-to-0260)
- [React Native Migration
Guide](./packages/design-system-react-native/MIGRATION.md#from-version-0280-to-0290)
### ✅ Checklist
- [x] Changelogs updated with human-readable descriptions
- [x] Changelog validation passed (`yarn changelog:validate`)
- [x] Version bumps follow semantic versioning
- [x] design-system-shared: minor (0.21.0 → 0.22.0) - new shared types +
breaking severity rename
- [x] design-system-react: minor (0.25.0 → 0.26.0) - new components +
breaking API changes
- [x] design-system-react-native: minor (0.28.0 → 0.29.0) - new
components + breaking severity rename
- [x] Breaking changes documented with migration guidance
- [x] Migration guides updated with before/after examples
- [x] PR references included in changelog entries
## **Pre-merge author checklist**
- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've reviewed the [Release
Workflow](./.cursor/rules/release-workflow.md) cursor rule
- [ ] All tests pass (`yarn build && yarn test && yarn lint`)
- [x] Changelog validation passes (`yarn changelog:validate`)
## **Pre-merge reviewer checklist**
- [ ] I've reviewed the [Reviewing Release
PRs](./docs/reviewing-release-prs.md) guide
- [ ] Package versions follow semantic versioning
- [ ] Changelog entries are consumer-facing (not commit message
regurgitation)
- [ ] Breaking changes are documented in MIGRATION.md with examples
- [ ] All unreleased changes are accounted for in changelogs
<!-- CURSOR_SUMMARY -->
---
> [!NOTE]
> **Medium Risk**
> The release documents multiple breaking consumer APIs (TextButton on
web, severity `.Error`→`.Danger`); upgrading without following
MIGRATION.md will cause compile/runtime mismatches, though this PR does
not change component implementation itself.
>
> **Overview**
> **Release 44.0.0** cuts new versions of the design-system packages and
records what shipped since the last release: monorepo root **43.0.0 →
44.0.0**, `@metamask/design-system-shared` **0.22.0**,
`@metamask/design-system-react` **0.26.0**, and
`@metamask/design-system-react-native` **0.29.0**.
>
> Changelogs document **React** additions (`Tag`,
`Toast`/`Toaster`/`toast()`), a **breaking** `TextButton` rewrite
(`size`/`TextButtonSize` → `variant`/`TextVariant`, dropped
inverse/disabled/icons, added `asChild`), and
**`AvatarIconSeverity.Error` → `.Danger`**. **React Native** adds
**`ListItem`** and the same **severity rename** on `AvatarIcon`,
`IconAlert`, and `Tag`. **Shared** adds cross-platform types
(`ListItem`, `Toast`, `TextButton`, `AvatarNetworkSize`) and the shared
**`.Error` → `.Danger`** severity vocabulary.
>
> **MIGRATION.md** on React and React Native gains **0.25→0.26** and
**0.28→0.29** sections with before/after examples. The only non-release
code change in the diff is reordering the `react-native-worklets`
devDependency in `apps/storybook-react-native/package.json`.
>
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
9c3345f. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
Description
BREAKING Standardizes severity vocabularies across the design system to use Danger instead of Error and Neutral instead of Default where applicable. This aligns component APIs per the design decision to avoid the TypeScript naming pitfall with
Errorand to use a severity-oriented neutral state.Changes include:
IconAlertSeverity,AvatarIconSeverity,TagSeveritynow exposeDanger("danger") instead ofError("error").Danger.Danger.Danger.Neutralover any legacydefault-like state.FORCE_JAVASCRIPT_ACTIONS_TO_NODE24=trueacross workflows to resolve the deprecation failure.No design tokens were renamed (e.g.,
ErrorDefaultremains as internal token naming); componentDangermaps to the existing Error-colored tokens.Related issues
Fixes: Align severity component APIs per internal discussion.
Manual testing steps
yarn storybookand verifyAvatarIconseverity controls includeDangerand render correctly.yarn storybook:ios|androidand verifyAvatarIcon,IconAlert, andTagdisplayDangervariants andNeutraldefaults.*.Errorin component APIs to confirm no remaining references outside design tokens.Screenshots/Recordings
N/A
Pre-merge author checklist
Pre-merge reviewer checklist
Slack Thread