Snackbar

The Snackbar component displays brief, non-intrusive notifications to users about the result of an action, appearing temporarily at the bottom or top of the screen.

Usage

import { Snackbar, addSnackbar, SnackbarVariant } from 'blend-v1'

function MyComponent() {
    const showSnackbar = () => {
        addSnackbar({
            header: 'Success!',
            description: 'Your action was completed successfully.',
            variant: SnackbarVariant.SUCCESS,
            onClose: () => console.log('Snackbar closed'),
            actionButton: {
                label: 'Undo',
                onClick: () => console.log('Undo clicked'),
            },
        })
    }

    return (
        <div>
            <button onClick={showSnackbar}>Show Snackbar</button>
            <Snackbar />
        </div>
    )
}

API Reference

Snackbar Component

addSnackbar Function

Features

• Four visual variants (info, success, warning, error)
• Optional description text
• Optional action button with custom label and handler
• Auto-dismiss functionality
• Manual close button
• Accessible by default
• Customizable styling through tokens
• Built on Sonner toast library
• Non-intrusive notifications

Usage Examples

Basic Snackbar

Simple snackbar with just a header

import { Snackbar, addSnackbar, SnackbarVariant } from 'blend-v1'

function MyComponent() {
    const showBasicSnackbar = () => {
        addSnackbar({
            header: 'Message sent successfully',
            variant: SnackbarVariant.SUCCESS,
        })
    }

    return (
        <div>
            <button onClick={showBasicSnackbar}>Show Basic Snackbar</button>
            <Snackbar />
        </div>
    )
}

Snackbar with Description

Snackbar with additional descriptive text

const showDetailedSnackbar = () => {
    addSnackbar({
        header: 'File uploaded',
        description:
            'Your document has been successfully uploaded to the cloud.',
        variant: SnackbarVariant.SUCCESS,
    })
}

Snackbar with Action Button

Snackbar with a custom action button

const showSnackbarWithAction = () => {
    addSnackbar({
        header: 'Changes saved',
        description: 'Your changes have been saved to the database.',
        variant: SnackbarVariant.INFO,
        actionButton: {
            label: 'Undo',
            onClick: () => {
                // Handle undo action
                console.log('Undo clicked')
            },
        },
    })
}

Different Variants

Snackbars with different visual styles

// Info variant
addSnackbar({
    header: 'Information',
    description: 'This is an informational message.',
    variant: SnackbarVariant.INFO,
})

// Success variant
addSnackbar({
    header: 'Success!',
    description: 'Operation completed successfully.',
    variant: SnackbarVariant.SUCCESS,
})

// Warning variant
addSnackbar({
    header: 'Warning',
    description: 'Please review your input before proceeding.',
    variant: SnackbarVariant.WARNING,
})

// Error variant
addSnackbar({
    header: 'Error',
    description: 'Something went wrong. Please try again.',
    variant: SnackbarVariant.ERROR,
})

Snackbar with Close Handler

Snackbar with custom close callback

const showSnackbarWithCloseHandler = () => {
    addSnackbar({
        header: 'Notification',
        description: 'This snackbar has a custom close handler.',
        variant: SnackbarVariant.INFO,
        onClose: () => {
            console.log('Snackbar was closed')
            // Perform cleanup or additional actions
        },
    })
}

Complete Example

Full example with all features

import { Snackbar, addSnackbar, SnackbarVariant } from 'blend-v1'

function App() {
    const handleSave = () => {
        // Simulate save operation
        addSnackbar({
            header: 'Document saved',
            description: 'Your changes have been saved successfully.',
            variant: SnackbarVariant.SUCCESS,
            onClose: () => {
                console.log('Save notification closed')
            },
            actionButton: {
                label: 'View',
                onClick: () => {
                    console.log('View document clicked')
                    // Navigate to document view
                },
            },
        })
    }

    return (
        <div>
            <button onClick={handleSave}>Save Document</button>
            <Snackbar />
        </div>
    )
}

Component Tokens

You can style the snackbar component using the following tokens:

export type SnackbarTokens = {
    icon: {
        color: {
            info: CSSObject['color']
            success: CSSObject['color']
            warning: CSSObject['color']
            error: CSSObject['color']
        }
    }
    container: {
        backgroundColor: CSSObject['color']
        borderRadius: CSSObject['borderRadius']
        padding: CSSObject['padding']
        minWidth: CSSObject['minWidth']
        maxWidth: CSSObject['maxWidth']
        boxShadow: CSSObject['boxShadow']
    }
    header: {
        layout: {
            gap: CSSObject['gap']
            marginBottom: CSSObject['marginBottom']
            iconGap: CSSObject['gap']
        }
        text: {
            color: CSSObject['color']
            variant: VariantType
        }
    }
    description: {
        layout: {
            paddingLeft: CSSObject['paddingLeft']
            gap: CSSObject['gap']
        }
        text: {
            color: CSSObject['color']
            variant: VariantType
        }
    }
    actionButton: {
        layout: {
            paddingX: CSSObject['padding']
        }
        text: {
            color: CSSObject['color']
            variant: VariantType
        }
    }
}

Enums

SnackbarVariant

enum SnackbarVariant {
    INFO = 'info',
    SUCCESS = 'success',
    WARNING = 'warning',
    ERROR = 'error',
}

Setup Requirements

To use the Snackbar component, you need to:

1. Add the Snackbar component to your app root:

import { Snackbar } from 'blend-v1'

function App() {
    return (
        <div>
            {/* Your app content */}
            <Snackbar />
        </div>
    )
}

2. Import the addSnackbar function where needed:

import { addSnackbar, SnackbarVariant } from 'blend-v1'

3. Call addSnackbar with your message options:

addSnackbar({
    header: 'Your message',
    variant: SnackbarVariant.SUCCESS,
})

The snackbar will automatically appear and dismiss itself after a few seconds, or when the user clicks the close button.