Appearance
Snackbar API Reference
Props
The Snackbar component doesn't accept direct props as it works through the useSnackbar composable.
Composable: useSnackbar
The Snackbar component is controlled through the useSnackbar composable which provides the following interface:
Methods
| Method | Parameters | Description |
|---|---|---|
showSnackbar | options (Object) | Display a snackbar notification with the specified configuration |
removeNotification | - | Remove the currently displayed notification |
clearAll | - | Alias for removeNotification |
success | primaryMessage (String), options (Object) | Show a success notification with convenience method |
error | primaryMessage (String), options (Object) | Show an error notification (isPersistent: true by default) |
warning | primaryMessage (String), options (Object) | Show a warning notification with convenience method |
info | primaryMessage (String), options (Object) | Show an info notification with convenience method |
Configuration Methods
| Method | Parameters | Description |
|---|---|---|
setPosition | position (String) | Set the default position for snackbar notifications |
setOffset | x (Number), y (Number) | Set the offset from position in rem units |
setDefaultTimeout | timeout (Number) | Set the default auto-dismiss timeout in milliseconds |
showSnackbar Options
The options object passed to showSnackbar has the following structure:
| Property | Type | Default | Description |
|---|---|---|---|
type | String | 'info' | Notification type: 'success', 'error', 'warning', 'info' |
primaryMessage | String | Required | Main message text to display |
secondaryMessage | String | null | Secondary/subtitle message text |
timeout | Number | 4000 | Auto-dismiss timeout in milliseconds (0 for no auto-dismiss) |
isPersistent | Boolean | false | Whether the notification should persist until manually closed |
showCloseButton | Boolean | true | Whether to show the close button |
icon | String | null | Custom HTML string for icon (uses default icons if not provided) |
position | String | config.value.position | Override position for this notification (uses global config if not provided) |
Default Configuration
The composable provides a config object for global settings:
| Property | Type | Default | Description |
|---|---|---|---|
position | String | 'bottom' | Default position for notifications (can be overridden per-notification) |
offset | Object | { x: 1, y: 1 } | Default offset from position in rem units |
defaultTimeout | Number | 4000 | Default auto-dismiss timeout in milliseconds |
Valid Positions
The following positions are supported:
'top-left''top''top-right''bottom-left''bottom''bottom-right'
Events
The Snackbar component doesn't emit events directly, but the composable provides reactive state:
| Property | Type | Description |
|---|---|---|
notification | Object | null | Current notification object or null if none displayed |
hasNotification | Boolean | Whether a notification is currently displayed |
notificationPosition | String | Current notification position |
Notification Object Structure
The notification object returned by the composable has the following structure:
| Property | Type | Description |
|---|---|---|
id | String | Unique identifier for the notification |
type | String | Notification type |
primaryMessage | String | Main message text |
secondaryMessage | String | null | Secondary message text |
iconRef | String | HTML string for the icon |
showCloseButton | Boolean | Whether close button is shown |
timeout | Number | Auto-dismiss timeout |
isPersistent | Boolean | Whether notification persists |
notificationClass | Array | CSS classes applied to notification (includes type class) |
createdAt | Number | Timestamp when notification was created |
timeoutId | Number | null | Internal timeout ID for auto-dismiss |
position | String | Position for this notification (overrides global config if provided) |
Slots
The Snackbar component doesn't use slots as content is provided through the notification object.
CSS Classes
The component uses the following CSS classes that can be customized:
| Class | Description |
|---|---|
.snackbar-container | Main container for positioning |
.snackbar-notification | Individual notification element |
.snackbar-content | Content wrapper with flex layout |
.snackbar-icon | Icon container |
.snackbar-messages | Messages container |
.snackbar-primary-message | Primary message text |
.snackbar-secondary-message | Secondary message text |
.snackbar-close-button | Close button element |
.success | Success notification styling |
.error | Error notification styling |
.warning | Warning notification styling |
.info | Info notification styling |
Position Classes
The component automatically applies position classes:
| Class | Description |
|---|---|
.position-top | Top center position |
.position-bottom | Bottom center position |
.position-top-left | Top left position |
.position-top-right | Top right position |
.position-bottom-left | Bottom left position |
.position-bottom-right | Bottom right position |
Dependencies
The Snackbar component depends on:
useSnackbarcomposable for state management- Browser's
crypto.randomUUID()or fallback ID generation convertRemToPixelsinject for responsive positioning (optional, falls back to computed rem conversion)