StopoverArrow

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

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.