Direction icons

Purpose

Direction icons distinguish frame actions at compact command-menu sizes. A divider and translucent new pane indicate split. A heavier outline around one pane indicates focus. The menu icon uses a chevron to indicate a submenu without resembling a frame action.

Import and props

import {
  SplitFrameLeftIcon,
  FocusFrameRightIcon,
  CommandMenuIcon,
} from '@takazudo/ui-components';

<SplitFrameLeftIcon width={24} height={24} />
<FocusFrameRightIcon width={16} height={16} />
<CommandMenuIcon width={16} height={16} />

Each icon accepts width, height, size, className, and style. Explicit dimensions override the size class. The catalog fixture shows all nine icons at 24px and 16px.

States and controls

The icons are decorative SVGs and have no local state or controls. Their meaning comes from the surrounding labeled command. The single AllDirectionIcons preview preserves the migrated example.

Keyboard and accessibility

The SVGs use aria-hidden. Give the containing button or menu item an accessible action name such as “Split frame left”; the icon alone does not announce one. Keyboard handling belongs to the parent command menu.

Mobile and scale

At narrow widths the fixture wraps icon cells. Use the 16px rendering for compact menus and the 24px rendering for larger targets. The SVG view box preserves geometry across product display scales.

Architecture

Component source: packages/ui-components/src/direction-icons.tsx. The legacy AllDirectionIcons export maps to the styleguide direction-icons/AllDirectionIcons fixture and thumbnail; its old story module was removed during cutover.