Concrete
control
Primitive

Caret

Disclosure chevron with open, directional, and size states.

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

Environment variablesclosed
Advanced settingsopen
Tree branchup
Playground

Props in the URL.

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

Loading playground.
States

Rendered matrix.

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

Environment variablesclosed
Advanced settingsopen
Tree branchup
Default

Closed disclosure affordance.

/render state
Environment variablesclosed
Advanced settingsopen
Tree branchup
Open

Open disclosure affordance.

/render state
Environment variablesclosed
Advanced settingsopen
Tree branchup
Direction

Directional variants.

/render state
Props

Public contract.

NameTypeDefaultDescription
direction'right' | 'down' | 'up'rightBase chevron orientation.
openbooleanfalseRotates the caret to the disclosure-open state.
size'small' | 'medium' | 'large'mediumCaret box and stroke rhythm.