Toggle is a button that switches between two states, usually 'on' and 'off', each time it is clicked. Toggle buttons are commonly used to enable or disable a feature, or to choose between two mutually exclusive options.
Definition#
Types#
Toggle Buttons are divided into two types: basic buttons and ghost buttons.
Elements#
Toggle Buttons typically consist of text/icons, which form the button's display content. They can appear individually or in combination.
- Icon
- Text
Based on combinations, there are the following types:
- Pure text button
- Left icon + text
- Right icon + text
- Pure icon button
Interaction States#
Toggle Buttons have two states: active and inactive.
Each state includes four CSS pseudo-class states: default, disabled, hover, and focused.
Sizes#
All Toggle Buttons come in three sizes: medium, small, and extra small.
