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.

Alert – Paper Plane

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

Alert – Operator

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

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.

Information

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

Success

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

Warning

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

Danger

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

Snacks

Primary

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

Secondary

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

Success

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

Danger

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

Warning

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

Information

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

Light

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

Dark

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

Toast

Warning

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

Information

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

Success

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

Error

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

Form Alerts

Success

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

Warning

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