Icon Button
Navigation
Tabs
Conversation
MarkerMessage
ComponentsIcon Button
Actions

Icon Button

An action triggered by an icon alone. Requires extra care for accessibility and hit targets in a vertical layout.

Design question

How should icon-only actions adapt to vertical reading flow without the label as orientation cue?

Default

Vertical labels below icons follow the reading axis · 다음/이전 orient naturally.

tsx
1<button
2 aria-label="다음 장으로 이동"
3 style={{
4 width: 44,
5 height: 44,
6 display: "flex",
7 alignItems: "center",
8 justifyContent: "center",

Guidance

Do
  • Always provide aria-label describing the action, not the icon
  • Use directional icons that align with reading direction
  • Maintain 44px minimum touch target
Don't
  • Use ambiguous icons without labels in novel vertical contexts
  • Flip horizontal directional icons · redesign them for the vertical axis
  • Rely on tooltip alone for accessibility
PreviousButtonNext Toggle