Back to Primitives

Divider

1:1Layout
View on GitHub

Visual separator.

Example
Content aboveContent below
Usage
import { Divider } from '@/components/polaris';

function Example() {
    return (
        <div>
            <p>Content above</p>
            <Divider />
            <p>Content below</p>
        </div>
    );
}
Component Source
import { forwardRef, createElement } from 'react';
import type { JSX } from 'react';

export type DividerProps = JSX.IntrinsicElements['s-divider'];

/**
 * Divider component - visual separator between content.
 *
 *
 * @example
 * <Divider />
 */
export const Divider = forwardRef<HTMLElement, DividerProps>((props, ref) => {
    return createElement('s-divider', { ref, ...props });
});

Divider.displayName = 'Divider';