Snackbar

Beta

Transient notification surface with optional action, auto-dismiss, and stacking support.

Installation

npm install @xaui/native

Import

import { Snackbar, SnackbarStack } from '@xaui/native/snackbar'

Basic Usage

Minimal example showing the component with its default configuration.

import { Snackbar } from '@xaui/native/snackbar'

export function Example() {
  return <Snackbar />
}

Basic

A simple snackbar with a message.

import { useState } from 'react'
import { Snackbar } from '@xaui/native/snackbar'
import { Button } from '@xaui/native/button'

export function BasicExample() {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <Button onPress={() => setVisible(true)}>Show Snackbar</Button>
      <Snackbar
        message="File saved successfully."
        isVisible={visible}
        onClose={() => setVisible(false)}
      />
    </>
  )
}

With Action

Snackbar with an action label the user can tap.

import { useState } from 'react'
import { Snackbar } from '@xaui/native/snackbar'
import { Button } from '@xaui/native/button'

export function WithActionExample() {
  const [visible, setVisible] = useState(false)

  return (
    <>
      <Button onPress={() => setVisible(true)}>Show</Button>
      <Snackbar
        message="Message deleted."
        actionLabel="Undo"
        onActionPress={() => console.log('undo')}
        isVisible={visible}
        onClose={() => setVisible(false)}
      />
    </>
  )
}

Theme Colors

Use themeColor to convey semantic meaning.

import { useState } from 'react'
import { Snackbar } from '@xaui/native/snackbar'
import { Button } from '@xaui/native/button'
import { Column } from '@xaui/native/view'

export function ThemeColorsExample() {
  const [color, setColor] = useState<string | null>(null)

  return (
    <Column gap={8}>
      <Button onPress={() => setColor('success')}>Success</Button>
      <Button onPress={() => setColor('danger')}>Danger</Button>
      <Button onPress={() => setColor('warning')}>Warning</Button>
      <Snackbar
        message="Operation completed."
        themeColor={color as 'success' | 'danger' | 'warning'}
        isVisible={color !== null}
        onClose={() => setColor(null)}
      />
    </Column>
  )
}

Stack

Show multiple snackbars at once with SnackbarStack.

import { useState } from 'react'
import { SnackbarStack } from '@xaui/native/snackbar'
import type { SnackbarItem } from '@xaui/native/snackbar'
import { Button } from '@xaui/native/button'

export function StackExample() {
  const [items, setItems] = useState<SnackbarItem[]>([])

  const addItem = () => {
    const id = Date.now().toString()
    setItems(prev => [...prev, { id, message: `Notification ${prev.length + 1}` }])
  }

  const dismiss = (id: string) => {
    setItems(prev => prev.filter(item => item.id !== id))
  }

  return (
    <>
      <Button onPress={addItem}>Add notification</Button>
      <SnackbarStack items={items} onDismiss={dismiss} />
    </>
  )
}