Design
Component checklist
Up to date
React
Review required
A toggle is used to switch between two opposing states in the UI, usually on vs. off.
Anatomy
- Handle
- Track
- Clarifying caption
Sizes
There are two sizes of toggles. In order to choose the right one, consider the context of the situation.
|
Size |
Description |
|
Standard |
Use the standard toggle for most cases. This is the default size.
|
|
Small |
Use the small toggle only in cases where there is a lack of space in the UI, or when the toggle’s action is secondary to the page content. The small toggle does not include a clarifying caption and is usually used in tables.
|