Snackbars

The snackbar comes in two varieties single line and two line.

Snackbar single line

For the snackbar all you need to do is use a container class .snackbard to contain a class .snackbar__content and or .snackbar__action.

To apply styling for the single line snackbar, you also need to add the class .snackbar--single-line.

Single line message.

Single line message with action.

    
<div class="snackbar snackbar--single-line">
    <div class="snackbar__content">
        Single line message.
    </div>
</div>

<div class="snackbar snackbar--single-line">
    <div class="snackbar__content">
        Single line message with action.
    </div>
    <div class="snackbar__actions">
        <button class="button button--text">
            Actions
        </button>
    </div>
</div>

Snackbar two line

For the snackbar all you need to do is use a container class .snackbard to contain a class .snackbar__content and or .snackbar__action.

To apply styling for the two line snackbar, you also need to add the class .snackbar--two-line. If you happen to have a long action you may wish to also apply the class .snackbar--two-line--long-action.

Two line message
with action.

    
<div class="snackbar snackbar--two-line">
    <div class="snackbar__content">
        Two line message <br> with action.
    </div>
    <div class="snackbar__actions">
        <button class="button button--text">
            Actions
        </button>
    </div>
</div>

<div class="snackbar snackbar--two-line snackbar--two-line--long-action">
    <div class="snackbar__content">
        Two line message<br> with action.
    </div>
    <div class="snackbar__actions">
        <button class="button button--text">
            A very long action
        </button>
    </div>
</div>

Settings

Scss	CSS	Result
$snackbar-width	--snackbar-width	Change snackbar width
$snackbar-min-height	--snackbar-min-height	Change snackbar min height
$snackbar-background	--snackbar-background	Change snackbar background color
$snackbar-border-radius	--snackbar-border-radius	Chnage snackbar border radius
$snackbar__content-color	--snackbar__content-color	Change snackbar font oclor
$snackbar__content-padding	--snackbar__content-padding	Change snackbar content padding
$snackbar__actions-padding	--snackbar__actions-padding	Change snackbar action padding
$snackbar--two-line-min-height	--snackbar--two-line-min-height	Change snackbar two line min height
$snackbar--two-line__actions-padding	--snackbar--two-line__actions-padding	Change snackbar two line action padding
$snackbar--two-line--long-action__content-padding	--snackbar--two-line--long-action__content-padding	Change snackbar two line long action, content padding
$snackbar--two-line--long-action__actions-padding	--snackbar--two-line--long-action__actions-padding	Change snackbar two line long action, actions padding