Ask Claude CodeAsk Codex

ChevronToArrow

A chevron that turns into an arrow while its link or button is hovered or focused from the keyboard. For a chevron that doesn't animate, use the static chevron icon.

Installation

bun add @harmo-ui/css @harmo-ui/react

Usage

import { Button, ChevronToArrow } from "@harmo-ui/react";

<Button>
  Continue
  <ChevronToArrow />
</Button>

Examples

This site is using your theme

Forward and back

It rests as a chevron and turns into an arrow while its button or link is hovered or focused from the keyboard. Forward is the default; data-direction="back" mirrors it. A back arrow leads the label and a forward arrow follows it.

<>
  <Button variant="secondary">
    <ChevronToArrow direction="back" />
    Go back
  </Button>
  <Button>
    Continue
    <ChevronToArrow />
  </Button>
</>

Any enabled <a href> or <button> works: hovering anywhere on it reveals the arrow.

Read the story
<Link href="/blog/automations">
  Read the story
  <ChevronToArrow />
</Link>

Right to left

In right-to-left text both directions mirror again: back always points toward the start of the line, here right, and forward toward its end.

<>
  <Button variant="secondary">
    <ChevronToArrow direction="back" />
    رجوع
  </Button>
  <Button>
    متابعة
    <ChevronToArrow />
  </Button>
</>

Without animation

In a disabled control it shows the finished arrow and doesn't move, as it does on touch screens and with reduced motion.

<Button disabled>
  Continue
  <ChevronToArrow />
</Button>

API reference

React

<ChevronToArrow> draws the SVG. Put it in a <Button> or <Link>, before the text for back and after it for forward. Other props are the <svg>'s attributes.

PropEffect
directionback mirrors it; forward when left out

HTML

An <svg class="hicon hchevron-to-arrow" viewBox="0 0 24 24"> inside an enabled <a href> or <button>, with aria-hidden="true" and focusable="false". It holds a .hchevron-to-arrow-head, with .hchevron-to-arrow-upper and .hchevron-to-arrow-lower, and a .hchevron-to-arrow-shaft: the head group slides, and the shaft fades in. Load chevron-to-arrow.css. It needs no script.

HookEffect
(default)Points forward
data-direction="back"Points back, such as for "Go back"

Back mirrors the whole drawing, so both directions draw and animate the same way. In right-to-left text both mirror again: back points toward the start of the line, forward toward its end. See ChevronToArrow's full contract.

Accessibility

Decorative: aria-hidden="true", with the link's or button's text naming it.