Separator

component

A line between two parts of a page.

Preview

Light

Code

<twig:Separator />

Dark

Code

<twig:Separator />

Try it

Change the props; the example is rendered again by the server.

<twig:Separator />

Variants

`orientation`

The separator orientation.

orientation="horizontal"

orientation="vertical"

`decorative`

Whether the separator is purely decorative (not semantic).

decorative="false"

decorative="true"

Installation

php bin/console ux:install separator --kit=github.com/parler-haut-interagir-librement/ux-kit

Props

Prop	Type	Default	Description
`orientation`	`'horizontal'\|'vertical'`	`'horizontal'`	The separator orientation.
`decorative`	`bool`	`true`	Whether the separator is purely decorative (not semantic).

Accessibility

Decorative by default, hidden from screen readers; with :decorative="false" it is announced.

Files to copy

templates/components/Separator.html.twig

{%- props
    ## 'horizontal'|'vertical' The separator orientation.
    orientation = 'horizontal',
    ## bool Whether the separator is purely decorative (not semantic).
    decorative = true
-%}
<hr data-slot="{{ attributes.render('data-slot')|default('separator') }}" data-orientation="{{ orientation }}"{% if decorative %} role="none"{% else %} aria-orientation="{{ orientation }}"{% endif %}{{ attributes.defaults({class: 'isSeparator' ~ (orientation is same as('vertical') ? ' isVertical' : '')}) }}>