Divider

Use Divider to separate and group content or build rhythm and structure. It renders a styled <hr> element.

Import

import { Divider } from '@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
variant	'primary' | 'secondary'	No	Change the divider style. Defaults to primary.

Divider also accepts a className prop, which is added to the rendered <hr>. Other standard HTML attributes aren’t applied to the element.

Example

import { Divider, provider } from '@dropins/tools/components.js';

await provider.render(Divider, {
  variant: 'secondary',
  className: 'my-divider',
})(document.querySelector('.divider'));

Related

• Header — renders a Divider beneath its title.
• Design tokens — the colors and spacing the divider uses.