🧒
Sunbird ED
  • Learn
    • Overview for Sunbird ED
    • Functional Capabilities
      • Learning Apps
      • Asset Sourcing
      • Organised Collections
      • Discover Content - Digital & Phygital
      • User Engagement
      • Rich and diverse content
      • Versatile Question Bank
      • Observability
      • Launch Course
      • Verifiable Credentials
      • Multi-Channel Chatbot
      • Targeted Programs
      • Manage Learn
        • Overview
        • What is an entity?
        • What is a Program?
        • What is a Project?
        • What is Observation?
        • What is a Survey?
        • What is Observation as a task inside a Project?
    • Product and Developer's Guide
      • Learning apps
        • Workflows
          • Onboarding of Users
          • Discovery of Content
          • Play content
          • Track progress and Earn credentials
          • Interacting / Collaborating
      • Asset Sourcing
      • Organised Collections
      • Discover Content - Digital & Phygital
      • User Engagement
      • Rich and Diverse Content
      • Versatile Question Bank
      • Observability
      • Launch Courses
      • Verifiable Credentials
      • Multi-Channel Chatbot
      • Targeted Programs
      • Manage Learn
        • Overview
        • Component Diagram
        • ML Core Service
        • ML Project Service
        • ML Survey Service
        • ML Report Service
        • ML Analytics Service
    • Adopters
      • DIKSHA
    • Technical Architecture
      • Design Principles
      • Technical Architecture Diagram
      • Tech Stack
    • Roadmap
  • USE
    • Deployment Diagram
    • Deployment Artifacts
      • 4.10
      • 4.10.1, 4.10.2, 4.10.3, & 5.0
    • Installing ED Platform
      • release-4.10.0
        • Prerequisites for your own Sunbird ED Instance
        • Infra Provisioning
        • Jenkins Setup
        • Ansible Variables
        • Build
        • Post Install Steps
      • release-5.0.0
        • Prerequisites for your own Sunbird ED Instance
        • Infra Provisioning
        • Jenkins Setup
        • Ansible Variables
        • Build
        • Post Install Steps
      • release-5.1.0
        • Prerequisites for your own Sunbird ED Instance
        • Infra Provisioning
        • Jenkins Setup
        • Ansible Variables
        • Build
        • Post Install Steps
      • release-5.2.0
        • Prerequisites for your own Sunbird ED Instance
        • Infra Provisioning
        • Jenkins Setup
        • Ansible Variables
        • Build
        • Post Install Steps
      • release-6.0.0 (Draft)
        • Prerequisites for your own Sunbird ED Instance
        • Infra Provisioning
        • Jenkins Setup
        • Ansible Variables
        • Build
        • Post Install Steps
      • Sunbird ED Portal
      • Sunbird ED Mobile
      • Easy installer (Draft)
    • Updating Sunbird Releases
      • 4.10.1, 4.10.2, 4.10.3, & 5.0
      • 5.0.0 to 5.1.0
      • 5.1.0 to 5.2.0
      • 5.2.0 to 6.0.0 [Draft]
    • Learn More
      • Dependencies
      • Specifications
        • SOFIE
        • SOFIE Implementation
    • Releases
      • Release calendars
        • Release Calendar 4.9, 4.10, 5.0
        • Release calendar 5.0.1, 5.0.2, 5.0.3, 5.1.0 (major), 5.1.1, 5.1.2, 5.1.3 &5.2.0 (major)
        • Release Calendar 6.0.0
        • Release Calendar 7.0.0
      • Planned items
        • 4.9, 4.9.1, & 4.10(major)
        • 4.10.1, 4.10.2, 4.10.3, & 5.0(major)
        • 5.0.1, 5.0.2, 5.0.3 & 5.1 (major)
      • Release notes
        • 6.0.0 (Draft)
        • 5.2.0 (Latest)
          • Release-5.1.2
          • Release-5.1.1
        • 5.1.0
        • 5.0.0
        • 4.9.0, 4.9.1, 4.10.0
        • 4.7.0, 4.8.0
      • Release Artifacts
        • 4.10.1, 4.10.2, 4.10.3, & 5.0
        • 5.0.1, 5.0.2, 5.0.3, & 5.1
      • Demo of released items
    • Telemetry
      • Trackable Collection
    • Minimal forms
    • API's
  • Engage
    • Discuss
  • Contribute
    • Extend / Contribute to Sunbird
    • System Requirements
      • Learning Apps
    • Source Code
      • Architecture - Component Diagram
      • Developer Guide
        • Portal
          • Component Diagram
        • Desktop
          • Component Diagram
        • Mobile
          • Component Diagram
          • sunbird-mobile-sdk
          • Sunbird-mobile-app plugins
          • Configurations to setup mobile app
        • Form service
          • Component Diagram
          • Data model
          • API's
        • Manage Learn
          • ML Core Service
            • Overview
            • User Flow Diagram
            • Component Diagram
            • Data Model
            • Folder Structure
            • API's
            • Deployment Overview
            • Local Service Setup Guide
          • ML Project Service
            • Overview
            • User Flow Diagram
            • Component Diagram
            • Data Model
            • Folder Structure
            • API's
            • Deployment Overview
            • Local Service Setup Guide
          • ML Survey Service
            • Overview
            • User Flow Diagram
            • Component Diagram
            • Data Model
            • Folder Structure
            • API's
            • Deployment Overview
            • Local Service Setup Guide
          • ML Report Service
            • Overview
            • User Flow Diagram
            • Component Diagram
            • Data Model
            • Folder Structure
            • API's
            • Deployment Overview
            • Local Service Setup Guide
          • ML Analytics Service
            • Overview
            • Component Diagram
            • Data Model
            • Setup Guide
              • ENV Variables ( Config.ini)
            • Ingestions
            • Folder Structure
            • Report creation and Updation Scripts
            • Deployment Overview
        • UI (User interface) Sunbird-Ed portal
          • Angular Material
          • Component Style Guide Version 1
            • Accordion
            • Buttons
            • Cards
            • Forms
            • Grid & Layout
            • Labels
            • Modals
            • Pagination
            • Rating
            • Search Box
            • Select Box
            • Tables
            • Tabs
            • Toast messages
            • Tooltip
            • Typography
          • SB-Styles: A Comprehensive Design Resource
          • SB-Themes Repository: Unifying Design Across Platforms
            • Classical Theme in Sunbird-Ed portal
            • Joyful Theme in Sunbird-Ed portal:
      • Reference Apps
      • Platform
    • Install Locally
      • SunbirdED Mobile
      • SunbirdED Portal
    • Configuration
      • SunbirdEd Portal
      • Sunbird Mobile
    • Independent Libraries
      • Common Consumption Components
      • SunbirdEd Forms
      • Sunbird Client Services
      • Sunbird Styles
      • Sunbird Themes
      • Sunbird Tag Manager
    • Issue tracker/ Create Issue
    • Contribute to ED
  • Misc
    • Templates
      • Upgrade Sunbird release document
      • Release Notes
    • Archived
      • High Level Capabilities
      • Workflows
      • Where Sunbird ED helps you
      • ED - Mobile App (going to archive)
        • 4.10.3 to 5.0.0
        • 5.0.0 to 5.1.0
      • Setting up Sunbird ED
      • Developer Documentation
      • API Reference Documentation
      • Detailed Documentation
      • Source Code
      • Actors & Actions
      • Detailed Capabilities
      • Data
      • Terminology
      • 5.1.0-hotfix (OCI )
  • Development Resources
    • Misc Pages
      • Portal - Manage Learn - Reports
      • App - Manage Learn - component diagram
        • Projects
        • Observation & Survey
        • Program
      • Portal - Manage Learn - component diagram
      • Mobile form configurations
      • Content Indexing Flow
      • What are multiple databases used for
      • Course completion, reports and certificate issue
      • How to access Flink UI
      • What are all the flink jobs for
      • How does data flow into Druid
      • Minimal build properties
  • Page 1
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. Contribute
  2. Source Code
  3. Developer Guide
  4. UI (User interface) Sunbird-Ed portal
  5. Component Style Guide Version 1

Toast messages

PreviousTabsNextTooltip

Last updated 1 year ago

Was this helpful?

Our toasts are subtle yet effective notifications, featuring color variations such as primary, success, warning, and error. These toasts provide essential feedback and information to users in a visually appealing and unobtrusive manner, enhancing their overall experience within the portal. For more information please refer to this link

<div class="sb-toaster sb-toast-info">
  <div class="sb-toast-body">
    <i class="book icon sb-toast-icon"></i>
    <div class="sb-toast-texts">
      <div class="sb-toast-title">Simple Meassage</div>
      <div class="sb-toast-message">message comes here</div>
    </div>
    <span class="sb-toast-close-icon"></span>
  </div>
</div>
<div class="sb-toaster sb-toast-success">
  <div class="sb-toast-body">
    <div class="sb-toast-texts">
      <div class="sb-toast-title">Thank you!</div>
      <div class="sb-toast-message">We have received your download request.
       The file will be sent to your registered email ID shortly.</div>
    </div>
    <span class="sb-toast-close-icon"></span>
  </div>
</div>
<div class="sb-toaster sb-toast-warning">
  <div class="sb-toast-body">
    <i class="warning icon sb-toast-icon"></i>
    <div class="sb-toast-texts">
      <div class="sb-toast-title">Download failed!</div>
      <div class="sb-toast-message">Your profile does not have a valid email ID. Please update your email ID.</div>
    </div>
    <span class="sb-toast-close-icon"></span>
  </div>
</div>
<div class="sb-toaster sb-toast-danger">
  <div class="sb-toast-body">
    <i class="plus icon sb-toast-icon"></i>
    <div class="sb-toast-texts">
      <div class="sb-toast-title">Delete this Content Type</div>
      <div class="sb-toast-message">When you delete a folder you also delete all of its contents.</div>
    </div>
    <span class="sb-toast-close-icon"></span>
  </div>
</div>
https://sunbird-ed.github.io/sunbird-style-guide/dist/#/toasters