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';