Divider

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

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

Component	Description
Divider	The great separator! The Divider 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, Divider is your go-to tool for creating breathing space and logical divisions.

Prop	Type	Default	Explanation
`size`	`string`	md	The span controller. For horizontal Dividers, size sets the width, and for vertical ones, it dictates the height. Use it to tailor the length of the Divider according to the space and layout it needs to separate.
`color`	`string`	default	The hue maestro. This prop allows you to paint your Divider 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 Divider should stretch across horizontally or stand tall vertically, giving you the power to partition content in the layout style that makes sense.