JS-Snackbar

JS-Snackbar

What is a Snackbar?

According to Material Design a Snackbar or Toast provides "brief messages about app processes at the bottom of the screen."

Generally, they should not have an icon associated with it and should be only one line on most devices.

While this version of a Snackbar follows the Material Design semantics closely, it strays in several major ways. You can read more about those differences on the GitHub page.

Message Content

The most basic option, and probably the one that will be used with every SnackBar. By default, the snackbar will display the message "Operation performed successfully". Messages should be short and descriptive; If your message expands to a second line, it is probably too long.

SnackBar({ message: "Hi there" })

The message can be any HTML string, but it is best to keep the HTML simple, using tags like <em> and <strong> to provide emphasis. For links, you should utilize the actions instead, to provide a pre-formatted link.

SnackBar({ message: "Do <em>NOT</em> do that again" })

Don't listen to the button above, just click it

Fixed Width

The SnackBars will resize based on the content passed in to them. However it may be desirable for them to have a fixed width, which you can set using the width property on the options. The width can be set to any valid CSS value for the width property.

SnackBar({ width: "1000px" })

If you set your width too low, the snackbar will not display correctly. For example, setting a width of 1rem is far too small for any text to fit within, and the text will collapse fully and be hidden. The width must, at minimum, fit a whole word for the SnackBar to be displayed correct. Use this feature with caution.

Context Colors

By default, there are several color options for showing notifications. When a notification is displayed, it can either have one of these context colors attached to it, or no indicator at all (the default behavior). Click one of the buttons below to view an example.

Snackbar({ status: "success" })

The possible options can be found in the table below

Color Indicates Value(s) Example
None None undefined, null, ""
Default
Green Success "green", "success"
Success
Orange Warning "warning", "alert", "orange"
Warning
Red Danger "danger", "error", "red"
Danger
Blue Info "info" or any other string
Info

Icons

Icons can add additional flair to your messages, so the SnackBar comes with several built-in. These icons are simply monospace text, and so can also be customized to any single character. Keep in mind, however, that monospaces characters are serif fonts in all modern browsers. If you are looking for more customization, then you'll need to roll some custom CSS to target the icons.

Snackbar({ status: "success", icon: "plus" })

While the icons and the colors can be mixed and matched, the icons require a status color to be set in order to appear.

Icon Value(s) Example
! "exclamation", "warn", "danger" !
Exclamation
? "question", "question-mark", "info" ?
Question
+ "add", "plus" +
Plus
Custom Any character R
Custom

Timeout Options

A snackbar can be configured to stay on screen for a certain amount of time. For warnings or messages with actions, it is best to increase this time. In general, the timeout should be no shorter than 4 seconds long.

SnackBar({ timeout: 5000 // ms })

Additionally, a SnackBar can also be configured to hide its close button. This is useful in scenarios where a message is particularly important, or where the message has a custom close action.

SnackBar({ dismissible: false })

If you don't want to the SnackBar to timeout and instead want the user to manually intervene, you can set the timeout to any value less than 1 or false

SnackBar({ timeout: 0 // less than or equal to 0 }) // OR SnackBar({ timeout: false })

Animation Speed

You may want the SnackBar to come on screen quicker or slower. To that end, you can specify the speed property to set the transition-duration for the element.

If you send in a number, then it will be applied as milliseconds (e.g. 500 will become "500ms"). If you send in a string, then it will be applied directly to the property with no modifications, making the valid options any valid CSS property for the transformation-duration property. Sending in any other type of value will result in no change to the animation duration.

SnackBar({ speed: "0.5s" }); // OR SnackBar({ speed: 500 });

Positioning

By default, the Snackbar will appear in the bottom-right corner of the container. This can be changed by setting the position option to one of the values below

Value Position
"tl" Top-Left
"tc" or "tm" Top-Center
"tr" Top-Right
"bl" Bottom-Left
"bc" or "bm" Bottom-Center
"br" Bottom-Right

SnackBars can appear in multiple positions simultaneously without interfering with one another, but it is best to avoid changing the position of your SnackBar.

SnackBar({ position: "br" });

Fixed Positioning

If your page's body scrolls as the page resizes, it may be necessary to use the fixed option. By default the SnackBars have absolute positioning and will stay within the container they are created in, but setting fixed: true will keep them in the corner of the screen.

SnackBar({ fixed: true })

Actions

Buttons can be added to SnackBars to allow for additional actions. This can be useful in scenarios where a snackbar may warrant additional user interaction (ie an undo button). Actions can also be configured to close the snackbar.

Containers

By default, the SnackBars will appear in the body tag. However, in some layouts, it may be more desirable for them to appear within an inner container.

The container property can accept any string that the document.querySelector method can, including classes and IDs. See MDN for more details.

Note: This requires the containing element to have a non-static position (e.g. position: relative;)

<div id="container"></div> SnackBar({ message: "I'm inside this box", container: "#container" })

Try it Yourself!

Use this form to create your own custom Snackbar using the options above.

Status must be set in order for icon to appear
Custom icon will supersede the preset icons above