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?

Decision

Icon buttons in vertical interfaces lose the directional cue the label provides. The icon itself must communicate directionality.

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

Accessibility

aria-label required. Role button implicit. Focus indicator must be visible at all sizes.

Open question

Should 'back' and 'forward' icons rotate 90° in a vertical interface, or adopt entirely new metaphors?

PreviousButtonNext Toggle