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

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