MetaMask / MetaMask/metamask-design-system

Bug: TextButton textProps does not reliably override inner Text styles (e.g. color)

Open
#986 0 comments 0 reactions 1 assignee View on GitHub

@brianacnguyen is already working on this.

Since Mar 19, 2026.

bug
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.