Separator

Also known as Divider

Separates content into sections.

When there’s a lot of content in one place, it can help to have it all clearly organized. Separators help you keep all related content together visually and semantically so users know where to focus their attention.

Component status

Figma

Released

Web (React)

Released

iOS (Swift)

n/a

Android (Kotlin)

n/a

Docs

Released

Component structure

Separator: clearly separates sections of content.

Guidelines

Use to group content

Separators present a visual cue to group together sections of content, but they also have semantic value. Remember that they add structure and aren’t just decorative.

Use them to show groups like related menu items and related text within a larger section.

import Separator from "@kiwicom/orbit-components/lib/Separator";
import LinkList from "@kiwicom/orbit-components/lib/LinkList";
import TextLink from "@kiwicom/orbit-components/lib/TextLink";

(): React.Node => (
  <LinkList>
    <TextLink
      href="https://orbit.kiwi/components/separator/"
      external
      type="secondary"
    >
      Guidelines
    </TextLink>
    <TextLink
      href="https://orbit.kiwi/components/separator/react/"
      external
      type="secondary"
    >
      React API
    </TextLink>
    <Separator />
    <TextLink
      href="https://orbit.kiwi/getting-started/channels/team-and-contributors/"
      external
      type="secondary"
    >
      About us
    </TextLink>
    <TextLink href="https://code.kiwi.com/" external type="secondary">
      &gt;code.kiwi.com_
    </TextLink>
    <Separator />
    <TextLink
      href="https://www.kiwi.com/en/pages/content/terms"
      external
      type="secondary"
    >
      Terms of use
    </TextLink>
    <TextLink
      href="https://www.kiwi.com/pages/content/terms"
      external
      type="secondary"
    >
      Privacy policy
    </TextLink>
  </LinkList>
)

Use only when necessary

Separators can be useful for grouping things and showing clear structures. But when they start to appear everywhere, they begin to lose their value.

Try making your designs clear with other separations, such as white space and colors.

Related components

Heading

To structure larger sections of content, use headings to make the hierarchy clear.

Text

Flags work very well for helping users select the right country. To give them that option, use a select component.