Guides
Components
Toasts are a type of feedback box that provide confirmation of whether an action has been successful or if an error has occurred.
() => { return ( <Button variant="secondary" onClick={() => createToast({ variant: "success", text: `This is a success toast`, width: `sm` }) } > Show toast </Button> ); };
Toasts, also known as snackbars, are small notification boxes used to provide feedback on user actions. They come in three variants: success, info, and error.
The toast component is built into the SporProvider, so you only need to import the createToast function to trigger a toast.
Toast messages should be clear and concise, using full sentences or short phrases whenever space allows. Keep the language simple, friendly, and easy to understand.
Remember that not everyone reads at the same speed or can move their eyes in time to see these messages before they disappear. Therefore, it may be smart to use this as an extra visual “spice” and show any error messages in a different way as well.
<createToast />import { createToast } from "@vygruppen/spor-react";
Returns a function "createToast", that acceps the following props:
Name | Type | Required? | Description |
|---|---|---|---|
variant | "success" | "info" | "error" | ||
text | string | Toast content | |
duration | number | Milliseconds a toast is shown before it disappears. Default to 6000 (6 seconds) | |
width | string | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'fit-content' | pixel values, etc.. , default "sm". |