Skip to content

The "dismissible" prop has no effect #434

Closed
@siiiiilvio

Description

@siiiiilvio

Describe the feature / bug 📝:

Using a variety of functions, such as toast() or toast.custom(), whether passing a jsx component or otherwise, adding the dismissible prop has no effect.

Steps to reproduce the bug 🔁:

  1. In terminal: npx create-react-app sonner && cd sonner
  2. npm i sonner
  3. In greenfield project (App.js):
import logo from './logo.svg';
import './App.css';
import { toast } from 'sonner';
import { Toaster } from 'sonner';

function App() {
  return (
    <div className="App">
      <Toaster />
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <button onClick={() => toast(<div>A custom toast with default styling</div>, { dismissible: false })}>Trigger toast</button>
      </header>
    </div>
  );
}

export default App;
  1. Click button.
  2. Toast is dismissed after default duration.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions