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,
""
|
|
| Green | Success |
"green",
"success"
|
|
| Orange | Warning |
"warning",
"alert",
"orange"
|
|
| Red | Danger |
"danger",
"error",
"red"
|
|
| Blue | Info |
"info" or any other string
|
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"
|
|
| ? |
"question",
"question-mark",
"info"
|
|
| + |
"add",
"plus"
|
|
| Custom | Any character |
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.
Note: This requires the containing element to have a non-static position (e.g. position: relative;)
Try it Yourself!
Use this form to create your own custom Snackbar using the options above.