Ask Claude CodeAsk Codex

Expand chevron

A chevron that folds from pointing down to pointing up while its control is expanded, as in Select, popup triggers, and menu buttons. For a chevron that turns into an arrow, use ChevronToArrow.

Installation

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

Usage

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

<Button variant="tertiary" aria-expanded={false}>
  Filters
  <ExpandChevron />
</Button>

Examples

This site is using your theme

Collapsed and expanded

It points down while its control is collapsed and up while it's expanded, following the control's aria-expanded. It must be a direct child of that control.

<>
  <Button variant="tertiary" aria-expanded={false}>
    Filters
    <ExpandChevron />
  </Button>
  <Button variant="tertiary" aria-expanded>
    Filters
    <ExpandChevron />
  </Button>
</>

Toggling

Press the button to watch the strokes fold through flat over 200ms. With reduced motion it flips at once. Here a small script toggles aria-expanded, as the control's own script would.

const [expanded, setExpanded] = useState(false);

return (
  <Button
    variant="secondary"
    aria-expanded={expanded}
    onClick={() => setExpanded(!expanded)}
  >
    More options
    <ExpandChevron />
  </Button>
);

API reference

React

<ExpandChevron> draws the SVG. Put it in the control whose aria-expanded it follows, as a direct child; a <Popup> keeps its trigger's aria-expanded current, and a <Select> its own. Other props are the <svg>'s attributes.

HTML

An <svg class="hexpand-chevron" viewBox="0 0 16 12">, a direct child of the element with aria-expanded, with aria-hidden="true" and focusable="false". It holds a .hexpand-chevron-head, with .hexpand-chevron-left and .hexpand-chevron-right: the two strokes fold while the head group shifts. Load expand-chevron.css, and the containing control's CSS, such as button.css.

HookEffect
aria-expanded="false" on the parentPoints down
aria-expanded="true" on the parentPoints up

It has no script of its own: it follows the aria-expanded that the control's script keeps current. See Expand chevron's full contract.

Accessibility

Decorative: aria-hidden="true". The control's aria-expanded already tells screen readers whether it's open.