Separator

Break it up beautifully with our Separator. A dash of space to keep your content light and digestible

1  import { Separator, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox gap='3' direction='column' justify='center'>
4    <Separator />
5  </FlexBox>
6

Component	Description
Separator	The great separator! The Separator component effortlessly carves out distinct sections in your content or layout, ensuring clarity and order. Whether you want a subtle line or a bold partition, Separator is your go-to tool for creating breathing space and logical divisions.

Prop	Type	Default	Explanation
`size`	`string`	md	The span controller. For horizontal Separators, size sets the width, and for vertical ones, it dictates the height. Use it to tailor the length of the Separator according to the space and layout it needs to separate.
`color`	`string`	default	The hue maestro. This prop allows you to paint your Separator in the shade that fits your design. Choose a color that complements or contrasts with your content, setting the visual mood.
`orientation`	`string`	horizontal	The direction setter. With this, you decide if the Separator should stretch across horizontally or stand tall vertically, giving you the power to partition content in the layout style that makes sense.

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius