Snackbar

Available as: Web Component

Notification bars with a variety of options. Great for success or failure messages. In default mode, the snackbar will fade out and remove itself from the DOM.

<div id="snackbar-disappearing" style="padding-bottom: 100px;"> <spx-snackbar text="Hello, I'm a snackbar." identifier="disappearing" target="#snackbar-disappearing" position-css="absolute"> </spx-snackbar> </div>
<div id="snackbar-fixed-reverse" style="padding-bottom: 100px;"> <style> body { min-height: 100px; } </style> <spx-snackbar text="Hello, I'm a snackbar." fixed closeable reverse target="#snackbar-fixed-reverse" position-css="absolute"> </spx-snackbar> </div>
<div id="snackbar-fixed" style="padding-bottom: 100px;"> <style> body { min-height: 100px; } </style> <spx-snackbar text="Hello, I'm a snackbar." fixed closeable identifier="fixed" target="#snackbar-fixed" position-css="absolute"> </spx-snackbar> </div>

Properties

animation-delay

Type: stringDefault: '200ms'CSS variable: --spx-snackbar-animation-delay

Component animation-delay property.

animation-duration

Type: stringDefault: '2000ms'CSS variable: --spx-snackbar-animation-duration

Component animation-duration property.

background

Type: stringDefault: 'var(--spx-color-gray-900)'CSS variable: --spx-snackbar-background

Component background property.

border

Type: stringCSS variable: --spx-snackbar-border

Component border property.

border-radius

Type: stringDefault: 'var(--spx-border-radius)'CSS variable: --spx-snackbar-border-radius

Component border-radius property.

class-button

Type: string

Apply classes to button.

class-text

Type: string

Apply classes to text.

closeable

Type: boolean

Adds option to close snackbar after its creation.

color

Type: stringDefault: '#ffffff'CSS variable: --spx-snackbar-color

Component color property.

distance-x

Type: stringDefault: '1em'CSS variable: --spx-snackbar-distance-x

Distance to the edge of the viewport on the x-axis.

distance-y

Type: stringDefault: '1em'CSS variable: --spx-snackbar-distance-y

Distance to the edge of the viewport on the y-axis.

fixed

Type: boolean

Makes snackbar not removable.

font-size

Type: stringDefault: '18px'CSS variable: --spx-snackbar-font-size

Component font-size property.

font-size-max

Type: numberDefault: 1.6CSS variable: --spx-snackbar-font-size-max

Component font-size-max property.

font-size-min

Type: numberDefault: 1CSS variable: --spx-snackbar-font-size-min

Component font-size-min property.

identifier

Type: stringDefault: 'primary'

Unique identifier for snackbar instance.

padding

Type: stringDefault: '1em'CSS variable: --spx-snackbar-padding

Component padding property.

padding-max

Type: numberDefault: 1.4CSS variable: --spx-snackbar-padding-max

Component padding-max property.

padding-min

Type: numberDefault: 1CSS variable: --spx-snackbar-padding-min

Component padding-min property.

position

Type: stringDefault: 'bottom-right'Choices: 'bottom-right', 'bottom-center', 'bottom-left', 'top-right', 'top-center', 'top-right'

Component position in page.

position-css

Type: "absolute" | "fixed" | "relative" | "static"Default: 'fixed'

CSS property position of button.

reverse

Type: boolean

Reverses the close button if "closable" prop is true.

space-between

Type: stringDefault: '12px'

Space between snackbars.

styling

Type: stringDefault: 'default'Choices: 'default', 'fluid', 'headless'

Styling.

target

Type: stringDefault: 'body'

Element where snackbars should be created in.

text

Type: stringDefault: "Hello, I'm a snackbar."

Text inside snackbar.

z-index

Type: numberDefault: 103CSS variable: --spx-snackbar-z-index

Component z-index property.

Events

spxSnackbarDidLoad

Fires after component has loaded.

Methods

reload

Reload component.