Primitive

Caret

Disclosure chevron with open, directional, and scale states.

Caret is an affordance, not decoration. Keep it currentColor, small, and baseline-aligned beside tree rows, accordions, and selects.
control
DOM renderImage render
CaretDefault

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Closed disclosure affordance.
Render state

Open

Open disclosure affordance.
Render state

Direction

Directional variants.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
direction'right' | 'down' | 'up'rightBase chevron orientation.
openbooleanfalseRotates the caret to the disclosure-open state.
scale'small' | 'medium' | 'large'mediumCaret box and stroke rhythm.