MetaMask / MetaMask/metamask-design-system
Bug: TextButton textProps does not reliably override inner Text styles (e.g. color)
@brianacnguyen is already working on this.
Since Mar 19, 2026.
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
### **Description**
`TextButton` in `@metamask/design-system-react-native` exposes `textProps` so consumers can override the inner `Text` (font, colour, etc.). In practice:
- Passing **string** children still does not allow expected overrides when using some `textProps` fields (e.g. **`color`**): the label keeps **primary-default** styling.
- Passing **React node** children is documented behaviour: `textProps` only apply to the wrapper `Text` around `children`, not to arbitrary nested nodes—consumers must style those themselves. The main gap is still that **`textProps` does not consistently apply** for the string case and for style fields consumers expect (notably colour).
- **`textProps.twClassName`** appears to work as a workaround in some cases (e.g. `textProps={{ twClassName: 'text-default' }}`), but this is non-obvious and does not match the expectation that e.g. `color` on `textProps` would work.
- **`TextButton`’s own `twClassName`** targets the `Pressable`, not the inner `Text`, so it does not solve text colour for cases like a “Forgot password?” link using **text-alternative**.
There is **no unit test coverage** for `textProps` in `TextButton.test.tsx`, which allowed this to slip through.
**Reporter context:** Unlock / login UI (“Forgot password?”) after migrating from deprecated `Button.Link`; desired **text-alternative** (or similar) on the control.
### **Steps to Reproduce**
1. Render `TextButton` with string children, e.g. `Forgot password?`.
2. Pass `textProps` intended to change text colour, e.g. `textProps={{ color: '...' }}` or equivalent token-based styling used in the app.
3. Observe the inner label colour remains **primary-default** (and `twClassName` on the root `TextButton` does not change the text colour).
### **Expected Behaviour**
- `textProps` should apply to the inner `Text` in a predictable way: documented props (including colour / semantic text classes) should override defaults unless disabled/inverse rules intentionally take precedence.
- Document clearly which props are supported and the recommended pattern (including when children are nodes vs string).
- Add tests that lock in `textProps` behaviour (including colour / `twClassName` merge order).
### **Screenshots**
Reporter attached screenshots in the internal thread (Unlock UI / login). Attach or link when available.
### **Environment**
- Package: `@metamask/design-system-react-native` — `TextButton`
- Platform: React Native (mobile)
### **Additional Context**
- **Product guidance:** For standalone actions that are really buttons (e.g. forgot password next to a primary CTA), **`Button` variant tertiary** may be more appropriate than `TextButton`; `TextButton` is intended for **inline, link-like** text. Consider clarifying **`ButtonLink` deprecation** docs so migrations choose `TextButton` vs `ButtonTertiary` correctly.
- **Slack thread (internal):** Design system team discussion 2026-03-19 — Ganesh Patra (reporter), Brian Kouda-Nguyen, George Marshall — confirmed bug re `color` in `textProps` and missing tests; workaround via `textProps.twClassName` noted.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.