Button Arrow
A button with directional arrows that automatically handles RTL/LTR layouts using semantic directions (forward/back) rather than physical directions (left/right).
Preview
Installation
Usage
Examples
Directions
Icon Styles
With Button Variants
Icon Sizes
Props
| Name | Type | Default | Description |
|---|---|---|---|
direction | 'forward' | 'back' | 'forward' | Arrow direction - "forward" progresses, "back" returns (automatic RTL handling) |
icon | 'chevron' | 'arrow' | 'chevron' | Icon style - "chevron" or "arrow" |
iconPosition | 'start' | 'end' | 'auto' | 'auto' | Position of the arrow - "start", "end", or "auto" (auto positions based on direction) |
iconSize | 'sm' | 'md' | 'lg' | 'md' | Size of the arrow icon - "sm", "md", or "lg" |
hideIcon | boolean | false | Hide the arrow icon (useful for conditional rendering) |
ButtonArrow also inherits all props from the Button component including variant, size, loading, disabled, and asChild.
Accessibility
Keyboard Navigation
Inherits all keyboard navigation from the Button component
Screen Reader
Arrow icons are decorative (aria-hidden) - button text provides context
RTL Considerations
Arrow direction automatically mirrors in RTL contexts using CSS transforms
RTL Considerations
ButtonArrow uses semantic directions (forward/back) that automatically adapt to RTL layouts. The arrow icons rotate 180° in RTL contexts, ensuring correct visual direction.
Semantic Directions
Use "forward" for progression and "back" for returning. The component handles the visual direction automatically.