Skip to main content
The Snackbar component provides instant notifications to users with optional actions, icons, and auto-dismiss functionality.

​
Import

import { Snackbar } from '@naturacosmeticos/natds-react'

​
Basic Usage

Snackbars use a ref-based API to control visibility: 
import { useRef, useState } from 'react'
import { Snackbar, Button } from '@naturacosmeticos/natds-react'

function Example() {
  const snackbarRef = useRef(null)

  return (
    <>
      <Snackbar ref={snackbarRef}>
        Operation completed successfully!
      </Snackbar>
      
      <Button onClick={() => snackbarRef.current?.show()}>
        Show Snackbar
      </Button>
    </>
  )
}

​
Opening and Closing

Control snackbar visibility using the ref’s show() method: 
const snackbarRef = useRef(null)

// Show the snackbar
snackbarRef.current?.show()

// With auto-dismiss (using animation and timer)
<Snackbar 
  ref={snackbarRef}
  animation={true}
  timer={3}
>
  This will auto-dismiss after 3 seconds
</Snackbar>

​
Feedback Types

Use different feedback types to indicate message severity: 
// Default (neutral)
<Snackbar ref={ref} feedback="default">
  This is a neutral message.
</Snackbar>

// Success
<Snackbar ref={ref} feedback="success">
  Changes saved successfully!
</Snackbar>

// Error
<Snackbar ref={ref} feedback="error">
  Unable to save changes.
</Snackbar>

// Warning
<Snackbar ref={ref} feedback="warning">
  Please review your input.
</Snackbar>

// Info
<Snackbar ref={ref} feedback="info">
  New updates available.
</Snackbar>

​
Positions

Place snackbars at different screen positions: 
// Top positions
<Snackbar ref={ref} position="topLeft">Top Left</Snackbar>
<Snackbar ref={ref} position="topCenter">Top Center</Snackbar>
<Snackbar ref={ref} position="topRight">Top Right</Snackbar>

// Bottom positions
<Snackbar ref={ref} position="bottomLeft">Bottom Left</Snackbar>
<Snackbar ref={ref} position="bottomCenter">Bottom Center</Snackbar>
<Snackbar ref={ref} position="bottomRight">Bottom Right</Snackbar>

​
With Icon

Add an icon to provide visual context: 
import { Icon } from '@naturacosmeticos/natds-react'

<Snackbar
  ref={snackbarRef}
  feedback="success"
  icon={
    <Icon 
      name="outlined-alert-check" 
      color="surface" 
    />
  }
>
  Operation completed successfully!
</Snackbar>
For warning feedback, use appropriate icon colors: 
<Snackbar
  ref={snackbarRef}
  feedback="warning"
  icon={
    <Icon 
      name="outlined-alert-warning" 
      color="highlight" 
    />
  }
>
  Please review this information.
</Snackbar>

​
With Title

Add a title for more structured messages: 
<Snackbar
  ref={snackbarRef}
  title="Success"
  feedback="success"
>
  Your changes have been saved.
</Snackbar>

​
With Actions

Add action buttons to snackbars: 
// Inline button
<Snackbar
  ref={snackbarRef}
  directionButton="inlineButton"
  buttonComponent={
    <Button variant="contained" onClick={() => handleAction()}>
      Retry
    </Button>
  }
>
  Failed to upload file.
</Snackbar>

// Block button (full width)
<Snackbar
  ref={snackbarRef}
  directionButton="blockButton"
  buttonComponent={
    <Button variant="contained" onClick={() => handleAction()}>
      View Details
    </Button>
  }
>
  Update available.
</Snackbar>

// No button
<Snackbar ref={snackbarRef} directionButton="none">
  Just a simple message.
</Snackbar>

​
With Icon Button

Use an icon as the action: 
<Snackbar
  ref={snackbarRef}
  directionButton="inlineButton"
  buttonComponent={
    <Icon 
      name="outlined-navigation-close" 
      color="surface" 
    />
  }
>
  Notification message.
</Snackbar>

​
Auto-Dismiss

Configure automatic dismissal: 
<Snackbar
  ref={snackbarRef}
  animation={true}
  timer={5}
>
  This will disappear after 5 seconds.
</Snackbar>

​
Complete Example

function NotificationDemo() {
  const snackbarRef = useRef(null)
  const [isDisabled, setIsDisabled] = useState(false)

  const showNotification = () => {
    setIsDisabled(true)
    snackbarRef.current?.show()
    
    // Re-enable button after animation completes
    setTimeout(() => setIsDisabled(false), 3000)
  }

  return (
    <>
      <Snackbar
        ref={snackbarRef}
        title="Success"
        feedback="success"
        position="topCenter"
        animation={true}
        timer={3}
        icon={<Icon name="outlined-alert-check" color="surface" />}
        directionButton="inlineButton"
        buttonComponent={
          <Button variant="text" onClick={() => console.log('Action')}>
            Undo
          </Button>
        }
      >
        Your changes have been saved successfully.
      </Snackbar>

      <Button 
        onClick={showNotification}
        disabled={isDisabled}
      >
        Save Changes
      </Button>
    </>
  )
}

​
Props

​
feedback
'default' | 'success' | 'error' | 'warning' | 'info'
default:"default"
The feedback type that determines background color and styling.
​
position
'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight'
default:"topCenter"
The position where the snackbar appears on screen.
​
title
string
Optional title displayed above the message.
​
icon
React.ReactNode
Optional icon component to display.
​
directionButton
'none' | 'inlineButton' | 'blockButton'
Determines the button layout style.
​
buttonComponent
React.ReactNode
The action button or icon to display.
​
animation
boolean
default:false
Whether to enable auto-dismiss animation.
​
timer
number
default:10
Duration in seconds before auto-dismiss (when animation is enabled).
​
className
string
Optional className to be added to the Snackbar.
​
children
React.ReactNode
The message content to display.
​
testID
string
Optional ID for testing purposes.

​
Ref Methods

The component exposes a ref with the following method:
​
show
() => void
Shows the snackbar. If animation is enabled, it will auto-dismiss after the timer duration.

​
Accessibility

  • Snackbars should not interrupt user workflow
  • Important messages should use dialogs instead of snackbars
  • Ensure sufficient color contrast for text and icons
  • Action buttons should have clear, descriptive labels
  • Consider users who may need more time to read — avoid very short timers

​
Best Practices

Keep messages brief and actionable
Use appropriate feedback types to match message severity
Provide actions when users can respond to the notification
Set reasonable timer durations (3-5 seconds for simple messages)
Position snackbars consistently throughout your app
Don’t use for critical messages — use dialogs instead
Don’t stack multiple snackbars — show one at a time
Don’t use very short timers that users can’t read
Avoid blocking important UI elements with snackbar placement

​
Implementation Details

  • Component source: /packages/react/src/components/Snackbar/Snackbar.tsx:9
  • Uses React’s useImperativeHandle to expose the show() method
  • Manages internal state for visibility
  • Supports auto-dismiss with configurable timing

Build docs developers (and LLMs) love

Get started for freeTalk to us