stable 1.0.0

Snackbar

Transient notifications stacked in a screen corner. Fully JS-driven: call ng.snackbar.show() and the framework builds the markup, stacks it and auto-dismisses it. Link ng_snackbar.js.

Unlike most components there is no markup to write: window.ng.snackbar.show(message, options) creates the snackbar, appends it to a ng-snackbar-stack for the requested position (creating the stack on first use) and removes it after duration. Each snackbar gets role="status" and aria-live="polite" for assistive tech.

Basic

The demo buttons on this page use a small site handler that forwards data-snackbar-* attributes to the API — in your app you call it directly:

app.js

// global API — always available once ng_snackbar.js is loaded
window.ng.snackbar.show('Your changes were saved.', {
    type: 'success',
    variant: 'soft',
    duration: 4000,
    position: 'bottom right'
});

snackbar.html

<button type="button" class="ng-btn ng-btn-primary-outline"
    data-snackbar="Your changes were saved."
    data-snackbar-type="success"
    data-snackbar-variant="soft">
    Show snackbar
</button>

Variants

Two treatments via variant: fill (solid colour background) and soft (surface background with a coloured side bar).

snackbar.html

<button type="button" class="ng-btn ng-btn-primary-outline"
    data-snackbar="Fill — solid colour background."
    data-snackbar-type="info"
    data-snackbar-variant="fill">
    Fill
</button>

<button type="button" class="ng-btn ng-btn-primary-outline"
    data-snackbar="Soft — surface background, coloured side bar."
    data-snackbar-type="info"
    data-snackbar-variant="soft">
    Soft
</button>

Colors

Every framework colour token works as type, in both variants.

Fill

snackbar.html

<button type="button" class="ng-btn ng-btn-primary sm"
    data-snackbar="primary"
    data-snackbar-type="primary"
    data-snackbar-variant="fill">
    primary
</button>
<button type="button" class="ng-btn ng-btn-secondary sm"
    data-snackbar="secondary"
    data-snackbar-type="secondary"
    data-snackbar-variant="fill">
    secondary
</button>
<button type="button" class="ng-btn ng-btn-success sm"
    data-snackbar="success"
    data-snackbar-type="success"
    data-snackbar-variant="fill">
    success
</button>
<button type="button" class="ng-btn ng-btn-info sm"
    data-snackbar="info"
    data-snackbar-type="info"
    data-snackbar-variant="fill">
    info
</button>
<button type="button" class="ng-btn ng-btn-warning sm"
    data-snackbar="warning"
    data-snackbar-type="warning"
    data-snackbar-variant="fill">
    warning
</button>
<button type="button" class="ng-btn ng-btn-danger sm"
    data-snackbar="danger"
    data-snackbar-type="danger"
    data-snackbar-variant="fill">
    danger
</button>
<button type="button" class="ng-btn ng-btn-mute sm"
    data-snackbar="mute"
    data-snackbar-type="mute"
    data-snackbar-variant="fill">
    mute
</button>
<button type="button" class="ng-btn ng-btn-blue sm"
    data-snackbar="blue"
    data-snackbar-type="blue"
    data-snackbar-variant="fill">
    blue
</button>
<button type="button" class="ng-btn ng-btn-blue-sky sm"
    data-snackbar="blue-sky"
    data-snackbar-type="blue-sky"
    data-snackbar-variant="fill">
    blue-sky
</button>
<button type="button" class="ng-btn ng-btn-green sm"
    data-snackbar="green"
    data-snackbar-type="green"
    data-snackbar-variant="fill">
    green
</button>
<button type="button" class="ng-btn ng-btn-lime sm"
    data-snackbar="lime"
    data-snackbar-type="lime"
    data-snackbar-variant="fill">
    lime
</button>
<button type="button" class="ng-btn ng-btn-aguagreen sm"
    data-snackbar="aguagreen"
    data-snackbar-type="aguagreen"
    data-snackbar-variant="fill">
    aguagreen
</button>
<button type="button" class="ng-btn ng-btn-indigo sm"
    data-snackbar="indigo"
    data-snackbar-type="indigo"
    data-snackbar-variant="fill">
    indigo
</button>
<button type="button" class="ng-btn ng-btn-purple sm"
    data-snackbar="purple"
    data-snackbar-type="purple"
    data-snackbar-variant="fill">
    purple
</button>
<button type="button" class="ng-btn ng-btn-purple-heart sm"
    data-snackbar="purple-heart"
    data-snackbar-type="purple-heart"
    data-snackbar-variant="fill">
    purple-heart
</button>
<button type="button" class="ng-btn ng-btn-cyan sm"
    data-snackbar="cyan"
    data-snackbar-type="cyan"
    data-snackbar-variant="fill">
    cyan
</button>
<button type="button" class="ng-btn ng-btn-magenta sm"
    data-snackbar="magenta"
    data-snackbar-type="magenta"
    data-snackbar-variant="fill">
    magenta
</button>
<button type="button" class="ng-btn ng-btn-yellow sm"
    data-snackbar="yellow"
    data-snackbar-type="yellow"
    data-snackbar-variant="fill">
    yellow
</button>

Soft

snackbar.html

<button type="button" class="ng-btn ng-btn-primary-soft sm"
    data-snackbar="primary"
    data-snackbar-type="primary"
    data-snackbar-variant="soft">
    primary
</button>
<button type="button" class="ng-btn ng-btn-secondary-soft sm"
    data-snackbar="secondary"
    data-snackbar-type="secondary"
    data-snackbar-variant="soft">
    secondary
</button>
<button type="button" class="ng-btn ng-btn-success-soft sm"
    data-snackbar="success"
    data-snackbar-type="success"
    data-snackbar-variant="soft">
    success
</button>
<button type="button" class="ng-btn ng-btn-info-soft sm"
    data-snackbar="info"
    data-snackbar-type="info"
    data-snackbar-variant="soft">
    info
</button>
<button type="button" class="ng-btn ng-btn-warning-soft sm"
    data-snackbar="warning"
    data-snackbar-type="warning"
    data-snackbar-variant="soft">
    warning
</button>
<button type="button" class="ng-btn ng-btn-danger-soft sm"
    data-snackbar="danger"
    data-snackbar-type="danger"
    data-snackbar-variant="soft">
    danger
</button>
<button type="button" class="ng-btn ng-btn-mute-soft sm"
    data-snackbar="mute"
    data-snackbar-type="mute"
    data-snackbar-variant="soft">
    mute
</button>
<button type="button" class="ng-btn ng-btn-blue-soft sm"
    data-snackbar="blue"
    data-snackbar-type="blue"
    data-snackbar-variant="soft">
    blue
</button>
<button type="button" class="ng-btn ng-btn-blue-sky-soft sm"
    data-snackbar="blue-sky"
    data-snackbar-type="blue-sky"
    data-snackbar-variant="soft">
    blue-sky
</button>
<button type="button" class="ng-btn ng-btn-green-soft sm"
    data-snackbar="green"
    data-snackbar-type="green"
    data-snackbar-variant="soft">
    green
</button>
<button type="button" class="ng-btn ng-btn-lime-soft sm"
    data-snackbar="lime"
    data-snackbar-type="lime"
    data-snackbar-variant="soft">
    lime
</button>
<button type="button" class="ng-btn ng-btn-aguagreen-soft sm"
    data-snackbar="aguagreen"
    data-snackbar-type="aguagreen"
    data-snackbar-variant="soft">
    aguagreen
</button>
<button type="button" class="ng-btn ng-btn-indigo-soft sm"
    data-snackbar="indigo"
    data-snackbar-type="indigo"
    data-snackbar-variant="soft">
    indigo
</button>
<button type="button" class="ng-btn ng-btn-purple-soft sm"
    data-snackbar="purple"
    data-snackbar-type="purple"
    data-snackbar-variant="soft">
    purple
</button>
<button type="button" class="ng-btn ng-btn-purple-heart-soft sm"
    data-snackbar="purple-heart"
    data-snackbar-type="purple-heart"
    data-snackbar-variant="soft">
    purple-heart
</button>
<button type="button" class="ng-btn ng-btn-cyan-soft sm"
    data-snackbar="cyan"
    data-snackbar-type="cyan"
    data-snackbar-variant="soft">
    cyan
</button>
<button type="button" class="ng-btn ng-btn-magenta-soft sm"
    data-snackbar="magenta"
    data-snackbar-type="magenta"
    data-snackbar-variant="soft">
    magenta
</button>
<button type="button" class="ng-btn ng-btn-yellow-soft sm"
    data-snackbar="yellow"
    data-snackbar-type="yellow"
    data-snackbar-variant="soft">
    yellow
</button>

Positions

Nine positions via position: top/middle/bottom × left/center/right. Each position keeps its own stack, so snackbars sent to different corners pile up independently.

snackbar.html

<button type="button" class="ng-btn ng-btn-primary-outline sm"
    data-snackbar="top left"
    data-snackbar-type="info"
    data-snackbar-variant="soft" data-snackbar-position="top left">
    top left
</button>
<button type="button" class="ng-btn ng-btn-primary-outline sm"
    data-snackbar="top center"
    data-snackbar-type="info"
    data-snackbar-variant="soft" data-snackbar-position="top center">
    top center
</button>
<button type="button" class="ng-btn ng-btn-primary-outline sm"
    data-snackbar="top right"
    data-snackbar-type="info"
    data-snackbar-variant="soft" data-snackbar-position="top right">
    top right
</button>
<button type="button" class="ng-btn ng-btn-primary-outline sm"
    data-snackbar="middle left"
    data-snackbar-type="info"
    data-snackbar-variant="soft" data-snackbar-position="middle left">
    middle left
</button>
<button type="button" class="ng-btn ng-btn-primary-outline sm"
    data-snackbar="middle center"
    data-snackbar-type="info"
    data-snackbar-variant="soft" data-snackbar-position="middle center">
    middle center
</button>
<button type="button" class="ng-btn ng-btn-primary-outline sm"
    data-snackbar="middle right"
    data-snackbar-type="info"
    data-snackbar-variant="soft" data-snackbar-position="middle right">
    middle right
</button>
<button type="button" class="ng-btn ng-btn-primary-outline sm"
    data-snackbar="bottom left"
    data-snackbar-type="info"
    data-snackbar-variant="soft" data-snackbar-position="bottom left">
    bottom left
</button>
<button type="button" class="ng-btn ng-btn-primary-outline sm"
    data-snackbar="bottom center"
    data-snackbar-type="info"
    data-snackbar-variant="soft" data-snackbar-position="bottom center">
    bottom center
</button>
<button type="button" class="ng-btn ng-btn-primary-outline sm"
    data-snackbar="bottom right"
    data-snackbar-type="info"
    data-snackbar-variant="soft" data-snackbar-position="bottom right">
    bottom right
</button>

Icon

Pass icon to prepend a Phosphor icon (type: 'ph' plus the icon name) or any class with type: 'class'.

app.js

window.ng.snackbar.show('Profile updated.', {
    type: 'success',
    icon: { type: 'ph', name: 'check-circle' }
});

Options

`type`	Colour token (default `info`).
`variant`	`fill` (default) or `soft`.
`duration`	Auto-dismiss in ms (default `4000`); `0` keeps it open until closed.
`closable`	Adds the × close control (default `true`).
`icon`	Optional `{ type, name, class }` icon descriptor.
`position`	Stack position (default `bottom right`).

show() returns the snackbar element; ng.snackbar.dismiss(el) closes it programmatically.

Generated markup

What the API renders — useful for styling hooks, not something you author by hand:

generated.html

<div class="ng-snackbar-stack bottom right" data-position="bottom right">
    <div class="ng-snackbar ng-snackbar--soft success is-active" role="status" aria-live="polite">
        <div class="ng-snackbar-message">
            <span>Your changes were saved.</span>
        </div>
        <div class="ng-snackbar-close">×</div>
    </div>
</div>

Anatomy

ng-snackbar-stack ng-snackbar ng-snackbar-message ng-snackbar-close

Modifiers & states

ng-snackbar--fill ng-snackbar--soft top middle bottom left center right is-active is-closing

API

ng.snackbar.show(message, options) ng.snackbar.dismiss(el)

Reference

Generated from the component source (_ng_snackbar.scss · ng_snackbar.js).

Component info

Name	`snackbar`
Type	`css+js`
Version	`1.0.0`
Status	`stable`
CSS	`/assets/css/components/_ng_snackbar.scss`
JS	`/assets/js/ng_snackbar.js`

Classes

.ng-avatar .ng-badge .ng-snackbar .ng-snackbar--fill .ng-snackbar--soft .ng-snackbar-close .ng-snackbar-message .ng-snackbar-stack

Tokens

--ng-snackbar-gap --ng-snackbar-offset --ng-snackbar-padding --ng-snackbar-transition --ng-snackbar-z