ButtonsLesson 110Free preview
Icon Buttons
This lesson is part of How To · All levels
Summary
An icon button is a button that only displays an icon without any text visible. Since the meaning is not always clear, buttons like this must have a name accessible via the air-labels. The size of the click area and the contrast of the icon should also be considered for convenience of use.
Key points
- Use the aria labels to name the button that only contains the icon.
- Flexbox helps center the icon inside the button.
- The click area should be quite large, at least about 44 x 44 pixels.
- The decorative icons inside the button are given hidden airs so they don't double-read.
- Provide a clear hover and focus-visible state.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.