Developer mode
Opens components on the React tab by default.
Your bookmarks

StopoverArrow

Shows how many stopovers there are between two locations.

When you need to fit a lot of information into a small space, it can help to use icons and other visual cues. Stopover arrows quickly show travelers how many times theyโ€™ll have a stop in a given segment.

Component status

Figma
Not doing
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Docs
Released

Component structure

Stops: represent each stop on a segment from 0 to 3.
import StopoverArrow from "@kiwicom/orbit-components/lib/StopoverArrow";
() => <StopoverArrow stops="2" />

Guidelines

Include nonvisual information

Stopover arrows can create important context for users, but not everyone will see them. So make sure everything necessary is presented in a non-visual form.

Include text that is accessible to everyone or text that is displayed only to screen readers. Or your other favorite technique. Just make sure everyone gets the information somehow.

Related components

Illustration

Stopover arrows help provide visual context. For more guidance on visual components, check out illustrations.

Icon

For other visual cues including more arrows, check out icons.