@loke/design-system
Version:
A design system with individually importable components
24 lines (23 loc) • 1.31 kB
text/typescript
import type { SeparatorProps } from "@loke/ui/separator";
/**
* Separator component for visually separating content
*
* The Separator component provides a simple, customizable way to visually separate content in your application. It can be used to create clear divisions between sections, items in a list, or any other elements that need visual separation.
*
* Key features:
* - Supports both horizontal and vertical orientations
* - Customizable appearance through className prop
* - Accessible, using appropriate ARIA role
* - Consistent styling with other UI components
* - Lightweight and easy to implement
*
* Usage considerations:
* - Use separators to improve the visual structure and readability of your content
* - Consider the appropriate orientation based on your layout (horizontal for row layouts, vertical for column layouts)
* - Ensure sufficient contrast between the separator and its background for visibility
* - Use sparingly to avoid cluttering the interface
* - Consider using margin or padding instead for subtle separations
*/
declare const Separator: import("react").ForwardRefExoticComponent<Omit<SeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
export { Separator };
export type { SeparatorProps };