Separator

Horizontal divider with a dashed line for visual separation.

Content above

Content below

12345678910111213
package showcase

import (
	popui "github.com/invopop/popui/go"
)

templ SeparatorDefault() {
	<div>
		@popui.P() { Content above }
		@popui.Separator()
		@popui.P() { Content below }
	</div>
}

Custom Spacing

Adjust vertical spacing with custom classes.

Content above

Content below

12345678910111213141516
package showcase

import (
	popui "github.com/invopop/popui/go"
	"github.com/invopop/popui/go/props"
)

templ SeparatorCustomSpacing() {
	<div>
		@popui.P() { Content above }
		@popui.Separator(props.Separator{
			Class: "my-8",
		})
		@popui.P() { Content below }
	</div>
}

API Reference

Separator

Horizontal separator component with dashed line styling.

Name	Type	Default	Description
`ID`	`string`	-	Unique identifier for the separator element
`Class`	`string`	-	Additional CSS classes to merge with separator styles
`Attributes`	`templ.Attributes`	-	Additional HTML attributes (data-, aria-, etc.)