Skip to content

separator.md

Latest commit

 

History

History
43 lines (30 loc) · 1.19 KB

separator.md

File metadata and controls

43 lines (30 loc) · 1.19 KB

Separator

A thin line divider. Supports horizontal and vertical orientations, solid / dashed / dotted line styles, custom thickness, and colour.

Preview

Usage example & demo from examples/app/src/screens/separator-example/index.tsx

Usage

import { Separator } from '@devraj-labs/vajra-ui-core';

// Between list items
<ItemA />
<Separator color="#E5E7EB" />
<ItemB />

// Vertical divider inside a Row
<Row h={48} align="center">
  <StatA />
  <Separator orientation="vertical" color="#E5E7EB" />
  <StatB />
</Row>

API

Prop Type Default Description
orientation 'horizontal' | 'vertical' 'horizontal' Direction of the line
thickness number 1 Line thickness in pixels
color string '#000' Line colour
variant 'solid' | 'dashed' | 'dotted' 'solid' Line style
  • Horizontal separators stretch to width: '100%'
  • Vertical separators stretch to height: '100%' — the parent must have an explicit height for this to be visible