# Separator
A visual divider component to separate content with various styles and orientations.
### **Import**
```tsx
import { Separator } from '@app-studio/web';
```
### **Default**
```tsx
import React from 'react';
import { Separator } from '../Separator';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';
export const DefaultSeparator = () => {
return (
Default Separator
This is some text above the separator. The separator helps to visually
divide content sections.
This is some text below the separator. Notice how the separator creates
a clear visual distinction between content areas.
);
};
```
### **Colors**
```tsx
import React from 'react';
import { Separator } from '../Separator';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';
export const SeparatorColors = () => {
return (
Default Color (Gray)
Primary Color
Success Color
Warning Color
Danger Color
);
};
```
### **Customized**
```tsx
import React from 'react';
import { Separator } from '../Separator';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';
import { Horizontal } from 'app-studio';
export const CustomizedSeparators = () => {
return (
Custom Thickness and Color
Custom Border Style with Direct Props
{/* Using direct props to override default styles */}
Vertical Separator with Custom Styling
Left Content
Right Content
Advanced Customization with Views
);
};
```
### **DesignSystem**
```tsx
/**
* Separator Examples - Design System
*
* Showcases the Separator component following the design guidelines:
* - Typography: Inter/Geist font, specific sizes/weights
* - Spacing: 4px grid system
* - Colors: Neutral palette with semantic colors
* - Rounded corners: Consistent border radius
* - Transitions: Subtle animations
*/
import React from 'react';
import { Separator } from '../Separator';
import { Vertical } from 'app-studio';
import { Horizontal } from 'app-studio';
import { Text } from 'app-studio';
import { View } from 'app-studio';
import { Card } from '../../Card/Card';
export const DesignSystemSeparator = () => {
return (
{/* Basic Separators */}
Basic Separators
This is content above the separator. The separator creates a visual
distinction between content sections.
This is content below the separator. Notice how it helps organize
the content into distinct sections.
{/* Separator Variants */}
Separator Variants
Solid (Default)
Dashed
Dotted
{/* Separator Thicknesses */}
Separator Thicknesses
Thin (1px)
Medium (2px)
Thick (4px)
{/* Separator Orientations */}
Separator Orientations
Horizontal (Default)
Vertical
Left Content
Right Content
{/* Separator Colors */}
Separator Colors
Default (Gray)
Primary (Blue)
Success (Green)
Warning (Yellow)
Danger (Red)
{/* Separator with Label */}
Separator with Label
Simple Label
Styled Label
Colored Label with Thicker Line
{/* Separator in Card */}
Separator in Card
Card with Separators
This is the first section of content in the card. The separator
below helps to organize the content into distinct sections.
This is the second section of content. Notice how the separator
creates a clear visual distinction between content areas within
the card.
This is the third section with additional information. The
labeled separator provides context for this section.
{/* Advanced Customization */}
Advanced Customization
Gradient Separator
Double Line Separator
Fancy Label Separator
CUSTOM LABEL
}
color="color-purple-300"
spacing="16px"
/>
);
};
```
### **InCard**
```tsx
import React from 'react';
import { Separator } from '../Separator';
import { Text } from 'app-studio';
import { Card } from '../../Card/Card';
import { Vertical } from 'app-studio';
export const SeparatorInCard = () => {
return (
Card Title
This is the first section of content in the card. The separator
below helps to organize the content into distinct sections.
This is the second section of content. Notice how the separator
creates a clear visual distinction between content areas within the
card.
This is the third section with additional information. The labeled
separator provides context for this section.
Card Footer
);
};
```
### **Index**
```tsx
export * from './default';
export * from './designSystem';
export * from './variants';
export * from './thicknesses';
export * from './orientations';
export * from './colors';
export * from './withLabel';
export * from './inCard';
export * from './customized';
```
### **Orientations**
```tsx
import React from 'react';
import { Separator } from '../Separator';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';
import { Horizontal } from 'app-studio';
export const SeparatorOrientations = () => {
return (
Horizontal Orientation (Default)
Vertical Orientation
Left Content
Right Content
);
};
```
### **Thicknesses**
```tsx
import React from 'react';
import { Separator } from '../Separator';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';
export const SeparatorThicknesses = () => {
return (
Thin Thickness (Default)
Medium Thickness
Thick Thickness
);
};
```
### **Variants**
```tsx
import React from 'react';
import { Separator } from '../Separator';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';
export const SeparatorVariants = () => {
return (
Solid Variant (Default)
Dashed Variant
Dotted Variant
);
};
```
### **WithLabel**
```tsx
import React from 'react';
import { Separator } from '../Separator';
import { View } from 'app-studio';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';
export const SeparatorWithLabel = () => {
return (
Separator with Text Label
Separator with Custom Label Styling
Separator with Custom Color and Label
);
};
```