Components

Overview

Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products.

Status/pills

Use tags when content is mapped to multiple categories, and the user needs a way to differentiate between them. Tags can also be used as a method of filtering data, to show only items within that particular category.

Green Status Pill Purple Status Pill Blue Status Pill Red Status Pill Grey Status Pill Yellow Status Pill

Data Exception Message

Toggle

Toggle is a control that is used to quickly switch between two possible states. Toggles are only used for these binary actions that occur immediately after the user “flips the switch”. They are commonly used for “on/off” switches.

Tooltip

A tooltip is a message box that is displayed when a user hovers over, clicks or gives focus to a UI element such as an icon, a highlighted word, or a button.

info icon

Section Loader

To use this section loader the parent element should be given a postiion relative with fixxed height and width.

Test

Loader

This loader will take the width and height of screen with a fixed position. Inorder to use this add this component and change the boolean from true to false for it to hide and show.

Stacked Bar Graph

This component is developed to show the graphical view of x and y axis for series of data. Click on the button to generate the stacked graph.