Web Notifications

Alerts and messages are a visual indicator for numeric values such as tallies and scores and unread emails.  They provide the user with information customized to their scenario.

Alert – Bell

See the Pen
Components – Alerts: Bell by Working Solutions (@wsol)
on CodePen.39945

Alert – Paper Plane

See the Pen
Components – Alerts: Paper Plane by Working Solutions (@wsol)
on CodePen.39945

Alert – Operator

See the Pen
Components – Alerts: Operator by Working Solutions (@wsol)
on CodePen.39945

Messages

The messages component can be used any time you want a user to receive an important message. Be sure to include the parent div “alerts” when adding this to your application.

Agent Spotlight

See the Pen
Components – Messages: Agent Spotlight by Working Solutions (@wsol)
on CodePen.39945

Information

See the Pen
Components – Messages: Information by Working Solutions (@wsol)
on CodePen.39945

Success

See the Pen
Components – Messages: Success by Working Solutions (@wsol)
on CodePen.39945

Warning

See the Pen
Components – Messages: Warning by Working Solutions (@wsol)
on CodePen.39945

Danger

See the Pen
Components – Messages: Danger by Working Solutions (@wsol)
on CodePen.39945

Snacks

Primary

See the Pen
Components – Snacks: Primary by Working Solutions (@wsol)
on CodePen.39945

Secondary

See the Pen
Components – Snacks: Secondary by Working Solutions (@wsol)
on CodePen.39945

Success

See the Pen
Components – Snacks: Success by Working Solutions (@wsol)
on CodePen.39945

Danger

See the Pen
Components – Snacks: Danger by Working Solutions (@wsol)
on CodePen.39945

Warning

See the Pen
Components – Snacks: Warning by Working Solutions (@wsol)
on CodePen.39945

Information

See the Pen
Components – Snacks: Information by Working Solutions (@wsol)
on CodePen.39945

Light

See the Pen
Components – Snacks: Light by Working Solutions (@wsol)
on CodePen.39945

Dark

See the Pen
Components – Snacks: Dark by Working Solutions (@wsol)
on CodePen.39945

Toast

Warning

See the Pen
Components – Full size Toast: Warning by Working Solutions (@wsol)
on CodePen.39945

Information

See the Pen
Components – Full size Toast: Information by Working Solutions (@wsol)
on CodePen.39945

Success

See the Pen
Components – Full size Toast: Success by Working Solutions (@wsol)
on CodePen.39945

Error

See the Pen
Components – Full size Toast: Error by Working Solutions (@wsol)
on CodePen.39945

Form Alerts

Success

See the Pen
Components – Form Alerts: Success by Working Solutions (@wsol)
on CodePen.39945

Warning

See the Pen
Components – Form Alerts: Warning by Working Solutions (@wsol)
on CodePen.39945