Notification

Is used to display a notification message, providing feedback to the user.

Code


                                                        
                                                        
                                                            <PyxisButton
                                                            label="Notify me"
                                                            data-testid="notify-button"
                                                            @click="triggerNotification"
                                                        />
                                                        
                                                        <!-- We advise you to declare the notification component once 
                                                        at the root of your project, for example 'App.vue'. -->
                                                        <PyxisNotification />
                                                        
                                                            

Example of a Notification component


                                                        
                                                        
                                                            import { notify } from "@pyxis/pyxis"
                                                        
                                                        const triggerNotification = () => {
                                                            notify({
                                                                type: "success",
                                                                title: `Title`,
                                                                description: `Success`,
                                                            })
                                                        }
                                                        
                                                            

Example of function to trigger a 'success' Notification


                                                        
                                                        
                                                            // notify.ts
                                                        
                                                        /**
                                                         * Emits a notification to the notification bus.
                                                         * @param notification { type: NotificationType, title: string, description?: string, size?: "default" | "compact", timeout?: number }
                                                         */
                                                        
                                                            

Our 'notify()' function documentation

Types


                                                        
                                                        
                                                            export type NotificationType = "success" | "warning" | "danger" | "info"
                                                        
                                                        export type Notification = {
                                                            id: number
                                                            type: NotificationType
                                                            title: string
                                                            description?: string
                                                            size?: "default" | "compact";
                                                            dataTestid: string
                                                            progress: number
                                                            duration: ReturnType<typeof setInterval> | null
                                                            isHovered: boolean
                                                            show: boolean
                                                            timeout: number
                                                        }