);
}
================================================
FILE: website/src/pages/styling.mdx
================================================
# Styling
Styling can be done globally via `toastOptions`, this way every toast will have the same styling.
```jsx
```
You can also use the same props when calling `toast` to style a specific toast.
```jsx
toast('Hello World', {
style: {
background: 'red',
},
className: 'class',
});
```
## Tailwind CSS
The preferred way to style the toasts with tailwind is by using the `unstyled` prop. That will give you an unstyled toast which you can then style with tailwind.
```jsx
```
You can do the same when calling `toast()`.
```jsx
toast('Hello World', {
unstyled: true,
classNames: {
toast: 'bg-blue-400',
title: 'text-red-400 text-2xl',
description: 'text-red-400',
actionButton: 'bg-zinc-400',
cancelButton: 'bg-orange-400',
closeButton: 'bg-lime-400',
},
});
```
Styling per toast type is also possible.
```jsx
```
## Changing Icons
You can change the default icons using the `icons` prop:
```jsx
,
info: ,
warning: ,
error: ,
loading: ,
}}
/>
```
You can also set an icon for each toast:
```jsx
toast('Hello World', {
icon: ,
});
```
================================================
FILE: website/src/pages/toast.mdx
================================================
import { toast } from 'sonner';
# Toast()
Use it to render a toast. You can call it from anywhere, even outside of React.
## Rendering the toast
You can call it with just a string.
```jsx
import { toast } from 'sonner';
toast('Hello World!');
```
Or provide an object as the second argument with more options. They will overwrite the options passed to [``](/toaster) if you have provided any.
```jsx
import { toast } from 'sonner';
toast('My toast', {
className: 'my-classname',
description: 'My description',
duration: 5000,
icon: ,
});
```
### Render toast on page load
To render a toast on initial page load it is required that the function `toast()` is called inside of a `setTimeout` or `requestAnimationFrame`.
```jsx
setTimeout(() => {
toast('My toast on a page load');
});
```
## Creating toasts
### Success
Renders a checkmark icon in front of the message.
```jsx
toast.success('My success toast');
```
### Error
Renders an error icon in front of the message.
```jsx
toast.error('My error toast');
```
### Action
Renders a primary button, clicking it will close the toast and run the callback passed via `onClick`. You can prevent the toast from closing by calling `event.preventDefault()` in the `onClick` callback.
```jsx
toast('My action toast', {
action: {
label: 'Action',
onClick: () => console.log('Action!'),
},
});
```
You can also render jsx as your action.
```jsx
toast('My action toast', {
action: ,
});
```
### Cancel
Renders a secondary button, clicking it will close the toast and run the callback passed via `onClick`.
```jsx
toast('My cancel toast', {
cancel: {
label: 'Cancel',
onClick: () => console.log('Cancel!'),
},
});
```
You can also render jsx in the cancel option.
```jsx
toast('My cancel toast', {
cancel: ,
});
```
### Promise
Starts in a loading state and will update automatically after the promise resolves or fails.
You can pass a function to the success/error messages to incorporate the result/error of the promise.
```jsx
toast.promise(myPromise, {
loading: 'Loading...',
success: (data) => {
return `${data.name} toast has been added`;
},
error: 'Error',
});
```
### Loading
Renders a toast with a loading spinner. Useful when you want to handle various states yourself instead of using a promise toast.
```jsx
toast.loading('Loading data');
```
### Custom
You can pass jsx as the first argument instead of a string to render a custom toast while maintaining default styling.
```jsx
toast(
A custom toast with default styling
, { duration: 5000 });
```
### Headless
Use it to render an unstyled toast with custom jsx while maintaining the functionality. This function receives the `Toast` as an argument, giving you access to all properties.
```jsx
toast.custom((t) => (