Dividers

Plain horizontal rules, labeled separators, and section headers with trailing controls.

Preview

Continue

Applicants

React preview

LiveView (HEEx)

alias DesignSystem.UI.{Buttons, Dividers}

<Dividers.divider />
<Dividers.divider label="Continue" />
<Dividers.divider>
  <.icon name="hero-plus-mini" class="size-5" />
</Dividers.divider>

<Dividers.section_header title="Applicants">
  <:trailing>
    <Buttons.button size="sm">Add new</Buttons.button>
  </:trailing>
</Dividers.section_header>

React (JSX)

import { PlusIcon } from "@heroicons/react/20/solid"
import { Button, Divider, SectionHeader } from "../ui/index.mjs"

<Divider />
<Divider label="Continue" />
<Divider icon={<PlusIcon className="size-5" />} />

<SectionHeader title="Applicants" trailing={<Button size="sm">Add new</Button>} />