2. Button Basics
Before diving into specific button types, it's essential to understand the fundamental elements that make up a button and how they contribute to its effectiveness. This chapter covers the anatomy of a button, its various states, sizing considerations, typography best practices, and accessibility guidelines.
Anatomy of a Button
A typical button consists of several key components:
- Container: The visible boundary of the button, often with a background color or border.
- Label: The text or icon that describes the button's action.
- Padding: The space between the label and the container's edge.
- States: Visual indicators of the button's current interaction state.