search

emilkowalski / sonner

An opinionated toast component for React.
https://sonner.emilkowal.ski
MIT License
8.37k stars 263 forks source link

Is there is any way to change close button position. #417

Closed nisharmultani closed 4 months ago

nisharmultani commented 4 months ago

Describe the feature / bug 📝:

Steps to reproduce the bug 🔁:

1. 2. 3.

UltimateGG commented 4 months ago

In toast options, you can set the closeButton's className or style and override its left/right position. Here's what I just did to flip it from the left to right side using CSS though:

  :where([data-sonner-toaster][dir='ltr'] button[data-close-button]) {
    --toast-close-button-start: auto;
    --toast-close-button-end: 0;
    --toast-close-button-transform: translate(35%, -35%);
  }

  :where([data-sonner-toaster][dir='rtl'] button[data-close-button]) {
    --toast-close-button-start: 0;
    --toast-close-button-end: auto;
    --toast-close-button-transform: translate(-35%, -35%);
  }
nisharmultani commented 4 months ago

can you give me a proper solution, please <Toaster closeButton />

emilkowalski commented 4 months ago

You can target individual elements like so https://sonner.emilkowal.ski/styling#tailwind-css