Snackbar

A small snackbar to display status messages.

Note: below is not the intended way of using this component. It is meant to be passed into the showSnackbar function of the SnackbarContainer component.

Showcase

Hello!

Source

<Snackbar
  text="Hello!"
  action={{
    text: 'oh, hi',
    callback: () => console.log('ack'),
  }}
  closeCallback={() => {}}
/>

Properties #

Functional Properties

Name	Default	Type	Description
`text` *		`string`	The text to show on the snackbar.
`closeCallback` *		`Function`	The callback to call to close the snackbar in the `SnackbarContainer`. Passed internally by the `SnackbarContainer` when using the `showSnackbar` function.
`action`	`null`	`{ text: string, callback: Function }`	The action for the button on the snackbar. If this is `null`, the button is not rendered. Otherwise it has `text` as a label and calls `callback` on click.
`closeOnAction`	`true`	`boolean`	Whether to call the `closeCallback` when an action button is pressed, after its callback.
`transition`	`fly`	Svelte transition	The transition to use to animate the in and out of the snackbar.
`transitionOptions`	`{ x: -20, duration: 150 }`	`object`	The options to use with the given transition.

* Required

Class Properties

All <Snackbar> components use the .snackbar class.

Falsy values passed to classes will be disregarded.

Name	Default	Type	Description
`class`	`null`	`string`	A class string to add to the component.
`textClass`	`null`	`string`	A class string to add to the label of the snackbar.
`buttonClass`	`null`	`string`	A class string to add to the action button of the snackbar.

SCSS Variables #

Name	Description	Default
`$snackbar-bg`	The background of the snackbar.	#404040
`$snackbar-fg`	The text color of the snackbar.	#FFFFFF
`$shadow-raised`	The shadow of the snackbar.	hover me 0 2px 4px -1px rgba(0, 0, 0, .2), 0 3px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
`$main`	The action button color (75% lighter).	#4300B0
`$snackbar-radius`	The curvature radius of the snackbar.	`.625em`
`$font` From `Button`	The font of the action button text.	`'Ubuntu'`
`$button-radius` From `Button`	The curvature radius of the action button.	`1.5625em`
`$bold-font-weight` From `Button`	The font weight of the action button.	`500`