pui

1.0.2

A Phoenix LiveView UI toolkit

HexDocs Report package

Current section

Files

Jump to

Documentation 41 Versions 2 Dependencies Dependants Files Activity

pui guides separator.md

Raw

guides/separator.md

# PUI.Separator

`PUI.Separator` provides a small visual and semantic boundary between related
content.

## Usage

```heex
<.separator />
<.separator orientation="vertical" class="mx-2 h-5" />
```

Separators are decorative by default. For a meaningful structural boundary,
set `decorative={false}` and provide an accessible label where appropriate:

```heex
<.separator decorative={false} aria-label="Profile sections" />
```

## Attributes

| Attribute | Default | Description |
|-----------|---------|-------------|
| `orientation` | `"horizontal"` | `"horizontal"` or `"vertical"` |
| `decorative` | `true` | Whether assistive technology should ignore it |
| `class` | `""` | Additional utility classes |
| `rest` | — | Global HTML attributes |

Operator	Description	Example
name:	Match package name. Supports * wildcards and repo/package form	name:phx* or name:hexpm/phoenix
description:	Full-text search of package descriptions	description:auth
depends:	Packages depending on a given package. Supports repo:package form	depends:ecto or depends:hexpm:ecto
build_tool:	Filter by build tool	build_tool:mix
updated_after:	Packages updated after an ISO8601 datetime	updated_after:2025-01-01T00:00:00Z
extra:	Match custom metadata (key,value). Nested keys are separated by commas	extra:license,MIT