# Separator

**Path:** Components/Layout

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Separator

 RbSeparator is a simple and elegant way to separate content with optional labels.
 It supports different alignments, colors, sizes, and gradient effects to match your design needs.

 Basic Usage

 Simple separator examples with and without labels.

 Show code

 Simple Separator

 Content above the separator

 Content below the separator

 Separator with Label

 Section 1

OR 

 Section 2

 Separator with Custom Content

 Before separator

 Featured 

 After separator

 Alignments

 Control separator label alignment: Start (Left), Center, or End (Right).

 Show code

 Start Alignment

 Start 

 Center Alignment (Default)

Center 

 End Alignment

End

 Gradient

 Toggle gradient effect on separator lines.

 Show code

 With Gradient (Default)

Gradient Effect 

 Without Gradient

No Gradient 

 Sizes

 Different separator sizes: Small, Default, and Large.

 Show code

 Small Size

Small 

 Default Size

Default 

 Large Size

Large 

 Colors

 Apply different color schemes to separators.

 Show code

 Default 
 Primary 
 Secondary 
 Info 
 Warning 
 Danger 
 Success 

 Selected Color

Primary 

 Readonly & Disabled

 Control interaction states with Readonly and Disabled parameters.

 Show code

 Normal Separator

Normal 

 Readonly Separator

Readonly 

 Disabled Separator

Disabled 

 RTL Support

 Separator alignment and gradient direction adapt to the local RTL container.

 Show code

 RTL Container

 Start and End alignments follow the local RTL writing direction automatically.

 بداية 

منتصف 

نهاية

 مميز

 ✕

 Contents