mui / mui/base-ui

[toast] typeof `toast.action`

Open
#3,335 0 comments 0 reactions 1 assignee Claimed by @atomiks View on GitHub
component: toast
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

I've been exploring the `Toast` component and noticed that the action button is currently configured via `toast.actionProps` as an object.

While this approach works, it feels slightly different from the typical declarative patterns we use in React. Since `actionProps` relies on a configuration object, it might be a bit restrictive when developers want to use their own custom components or need full control over the rendered output.

Also, considering that `title` and `description` accept `ReactNode`, using an object for `actionProps` seems to create a minor inconsistency in the API interface.

**Describe the solution you'd like**

I would like to propose supporting an **`action`** prop that accepts a `React.ReactNode`.

This would allow developers to pass JSX elements (like ``) directly. This approach aligns well with the "Inversion of Control" principle, giving developers more freedom to style and structure the action area as they see fit.

**Code Comparison**

**Current (Config-based):**

```tsx
toastManager.add({
title: 'Action performed',
actionProps: {
children: 'Undo',
onClick: handleUndo,
},
});
```

**Proposed (JSX-based):**

```tsx
toastManager.add({
title: 'Action performed',
action: (

Undo

),
});
```

I'd love to hear the team's thoughts on this. If you agree with this direction, I would be happy to contribute by working on a PR.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.