Button
Navigation
Tabs
Conversation
MarkerMessage
ComponentsButton
Actions

Button

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

$ npx verticallyworks add vertical-button
Design question

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

Decision

Rotation alone doesn't make a vertical button · apply writing-mode to the label itself.

Default

Primary다음 장
Outline이전 장
Ghost설정
Disabled비활성
tsx
1import { VerticalButton } from "@/components/vw/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>

Source

The exact file npx verticallyworks add vertical-button copies into your project · yours to edit. Styling comes entirely from the design tokens.

tsx
1"use client";
2
3/**
4 * VerticalButton · a button whose label is set on the vertical reading axis.
5 *
6 * The label uses real `writing-mode: vertical-rl` (never a rotation transform),
7 * so mixed CJK/Latin content orients correctly per glyph. The horizontal
8 * cross-axis stays a comfortable touch target regardless of label length.

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