indreka-toggle-button

Introduction

The toggle button is a fundamental component of our design system. Its purpose is to allow users to toggle between two states with a button press.

Toggle Button

The table below provides the size specifications:

Size	Track Height
Mobile	32 px
Tablet	36 px
Web/Desktop	44 px

Toggle Button Colors

The table below provides the color specifications:

Color	Hex code
Primary-1	#FFB42A
Neutral-1	#262626
Neutral-4	#F4F4F4

Toggle Button States

The Toggle button component has several states, depending on the user's interaction with it

State	Description
Default	The initial state of the Input Field component
Disabled	When the toggle button is not available for interaction

indreka-toggle-button component

The <indreka-toggle-button></indreka-toggle-button> component having the following property:

1. disabled having type of boolean.
2. labelLeft having type of string.
3. labelRight having type of string.

use

<indreka-toggle-button></indreka-toggle-button>

we can pass attributes inside like:

1. disabled <indreka-toggle-button disabled></indreka-toggle-button>

   -- This will disable the toggle button preventing the user to perform any action the input field.

2. labelLeft <indreka-toggle-button labelLeft="text"></indreka-toggle-button>

   -- This will add the label for the left side track of the toggle button.

3. labelRight <indreka-toggle-button labelRight="text"></indreka-toggle-button>

   -- This will add the label for the right side track of the toggle button.

Angular Usage

In the module.ts, import the component after installing from NPM.

import 'indreka-toggle-button';