Chevron

Chevron

Default (Right-facing)

CollapsedExpanded

Down-facing Variant

CollapsedExpanded

Interactive Toggle

Click to toggle

Accordion header

Sizes

Usage

import { Chevron } from "@f0rbit/ui";

<Chevron />
<Chevron expanded />

Facing Direction

The chevron can point right (default) or down:

<Chevron facing="right" />
<Chevron facing="down" />

Expanded State

When expanded is true, the chevron rotates 90 degrees:

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

<button onClick={() => setExpanded(e => !e)}>
  <Chevron expanded={expanded()} />
  Toggle
</button>

Sizes

<Chevron size="0.75em" />
<Chevron size="1em" />
<Chevron size="1.5em" />
<Chevron size={24} />

Props

Prop	Type	Default	Description
expanded	boolean	false	Whether the chevron is in expanded state
facing	"right" | "down"	"right"	Default direction the chevron points
size	number | string	"1em"	Size of the chevron