Components›Button
Actions

Button

Trigger an immediate action. In a vertical interface, label and icon orientation must match the reading axis.

Design question

Where does the label sit relative to the touch target when the button is oriented for a vertical layout?

Default

Primary다음 장
Outline이전 장
Ghost설정
Disabled비활성
tsx
1import { VerticalButton } from "@/components/ui/vertical-button"
2
3export function ButtonDefault() {
4 return (
5 <div style={{ display: "flex", gap: 16 }}>
6 <VerticalButton variant="primary">다음 장</VerticalButton>
7 <VerticalButton variant="outline">이전 장</VerticalButton>
8 <VerticalButton variant="ghost">설정</VerticalButton>

Guidance

Do
  • ✓Use writing-mode: vertical-rl on the label itself
  • ✓Keep touch target minimum 44×44px regardless of visual size
  • ✓Match label direction to surrounding reading flow
Don't
  • ✗Rotate a horizontal button with transform: rotate(90deg)
  • ✗Use icon-only buttons without an accessible label
  • ✗Assume tap target equals the visible text bounds

Accessibility

Min touch target 44×44. aria-label in the UI language. Focus ring must follow vertical orientation.

Open Question

Should icon-only vertical buttons place the icon above or below the label? Does reading direction change this answer?

Next →Icon Button