Snackbar

a brief confirmation with an optional single action, anchored bottom-center.

Example

Message archived.
Copied to clipboard.
<div class="lucent-snackbar">
  <div class="lucent-snackbar__content">
    <span class="lucent-icon lucent-icon--md lucent-snackbar__icon" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">archive</span>
    </span>
    <span class="lucent-snackbar__message">Message archived.</span>
  </div>
  <span class="lucent-button lucent-button--ghost lucent-button--md">
    <button class="lucent-button__inner" type="button">
      <span class="lucent-button__label">Undo</span>
    </button>
  </span>
</div>
<div class="lucent-snackbar">
  <div class="lucent-snackbar__content">
    <span class="lucent-icon lucent-icon--md lucent-snackbar__icon" aria-hidden="true">
      <span class="material-icons lucent-icon__glyph">content_copy</span>
    </span>
    <span class="lucent-snackbar__message">Copied to clipboard.</span>
  </div>
</div>

Using it

Angular lucent-snackbar
import { LucentSnackbar } from '@design-foundry/lucent-angular';
Stylesheet .lucent-snackbar
@design-foundry/lucent-styles/core.css

API

NameKindTypeDefaultDescription
message input string '' snackbar text.
icon input string widgets leading glyph.
showIcon input boolean true shows the leading glyph.
actionLabel input string '' optional action button.
action output void emits when the action is pressed.

Theming

Color (3)
Size & spacing (5)
Border & radius (2)
Shadow (1)
Type (3)