Snackbars confirm an action just after it happens. Norbielink uses a white card toast anchored to the top-right, carrying a title and a short description — used for “Profile saved”, “Email sent” and the auth flow. It has two kinds, default and warning, and never carries an action.
Variants
Profile saved
Your user name has been updated.
Email sent
We’ve sent a password reset link to your inbox. Open it to set a new password.
Can’t save draft yet
Fill in Agency Name, Code, Contact, and Email first.
<div class="snack"> <span class="snack-icon"> <span class="material-icons-round">check</span> </span> <div class="snack-body"> <div class="snack-title">Profile saved</div> <div class="snack-text">Your user name has been updated.</div> </div> <span class="material-icons-round snack-close">close</span> </div> <!-- warning kind: identical card and disc, only the glyph changes --> <span class="snack-icon">…</span>
Specs
| Property | Value | Token |
|---|---|---|
| Position | absolute, top 56px / right 32px · slides in from the right | |
| Surface | #FFFFFF / #1E2240 · border 1px #E5E7EB / rgba(255,255,255,.12) | |
| Radius | 12px | |
| Shadow | 0 12px 30px rgba(0,0,0,0.12) | |
| Padding | 12px 14px · gap 12px · items aligned to the top | |
| Width | max 360px · no min-width — the card shrinks to its content | |
| Icon disc | 32×32px · radius 9px — a rounded square, not a circle | |
| Disc fill | rgba(166,20,195,.08) / rgba(201,166,255,.22) | |
| Icon | 16×16px stroked · #A614C3 / #E6B8FF · stroke-width 1.75 (lighter than the default) | |
| Title | 13px / 600 · #1F2937 / #F9FAFB | |
| Description | 12px · line-height 16px · #6B7280 / #8B8FA8 · margin-top 2px | |
| Dismiss | 14×14px, muted, optional | |
| Kinds | default and warning — same card, different glyph | |
| Action | None. No toast in the product carries an action link or button — enumerated across all 26 overlay renderers in the bundle |