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.
The table below provides the size specifications:
Size | Track Height |
---|---|
Mobile |
32 px |
Tablet |
36 px |
Web/Desktop |
44 px |
The table below provides the color specifications:
Color | Hex code |
---|---|
Primary-1 | #FFB42A |
Neutral-1 | #262626 |
Neutral-4 | #F4F4F4 |
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 |
The <indreka-toggle-button></indreka-toggle-button>
component having the following property:
-
disabled
having type of boolean. -
labelLeft
having type of string. -
labelRight
having type of string.
<indreka-toggle-button></indreka-toggle-button>
we can pass attributes inside like:
-
disabled
<indreka-toggle-button disabled></indreka-toggle-button>
-- This will disable the toggle button preventing the user to perform any action the input field.
-
labelLeft
<indreka-toggle-button labelLeft="text"></indreka-toggle-button>
-- This will add the label for the left side track of the toggle button.
-
labelRight
<indreka-toggle-button labelRight="text"></indreka-toggle-button>
-- This will add the label for the right side track of the toggle button.
In the module.ts, import the component after installing from NPM.
import 'indreka-toggle-button';