Toggle Switch
A button in the context of web and application development refers to an interactive UI element designed to trigger an action when clicked or tapped by a user. It serves as a control element that allows users to perform tasks, navigate, or interact with an application or website.
Key Characteristics:
- Clickable: Responds to user interaction, typically via mouse click, keyboard focus, or touchscreen tap.
- Label/Content: Contains text, icons, or both to indicate its purpose (e.g., "Submit," "Cancel," or a search icon).
- Styling: Often styled with borders, background colors, hover effects, and more to stand out as interactive.
-
States: May visually change to represent different states, such as:
- Default: Normal appearance when idle.
- Hover: Slight change when the user hovers over it.
- Active/Pressed: A visual effect when clicked.
- Disabled: A non-interactive state, often grayed out.
Toggle switch
4-Point Grid System is a framework for designing and laying out user interfaces using increments of 4 pixels (or points) for spacing, sizing, and positioning elements. It ensures consistency, alignment, and balance in the visual design, making interfaces more predictable and easier to scale across different screen sizes.
-
1Size: 20 x 20
-
2Border radius: 4px
-
3Icon size: 12 x 12
-
4Opacity: 40%