GitHub
Copy-pasteStyled

Separator

Create borders between components

Separator draws an accessible horizontal or vertical boundary between groups of content.

Features

  • Horizontal and vertical orientation

  • Web separator role and aria-orientation

Installation

Separator is already installed in tamagui, or you can install it independently:

yarn add @tamagui/separator

Usage

Separator uses the borderWidth and borderColor attributes for its style, so override those when extending it.

export default () => (

  <XStack alignItems="center">

    <Paragraph>Blog</Paragraph>

    <Separator alignSelf="stretch" vertical />

    <Paragraph>Docs</Paragraph>

    <Separator alignSelf="stretch" vertical />

    <Paragraph>Source</Paragraph>

  </XStack>

)

API reference

Separator

Separator extends View, inheriting all the Tamagui standard props, plus:

Props

  • vertical

    boolean

    Shows the separator vertically.

    • Previous

    Lucide Icons

    Next

    Spinner

    Edit this page on GitHub.