Arrow

Arrow is a simple SVG component that renders a customizable arrow. It is typically used inside Popover, Tooltip, Dropdown, or Menu to point to the trigger element. The arrow uses preserveAspectRatio="none" to allow flexible sizing via width and height props.

Usage

import { Arrow } from '@loke/ui/arrow';

export default function Example() {
  return (
    <div style={{ position: 'relative' }}>
      <button>Open popover</button>
      <div style={{ position: 'absolute', background: 'white', border: '1px solid #ccc', padding: '12px' }}>
        Popover content
        <Arrow width={12} height={6} style={{ position: 'absolute', bottom: '-6px', left: '50%', transform: 'translateX(-50%)' }} />
      </div>
    </div>
  );
}

Props

Examples

Accessibility

• Arrow is purely decorative; no ARIA roles required.
• The SVG has a title="Arrow" element for screen readers.
• If a custom arrow is rendered, ensure it remains visually unobtrusive.

Best practices

• Position the arrow absolutely inside a Popover or Tooltip.
• Use left: '50%', transform: 'translateX(-50%)' to center it horizontally on the trigger.
• Keep the arrow width and height proportional (e.g., 12px width, 6px height).
• Coordinate arrow color with the floating UI's background (via CSS).