---
title: "Separator"
url: "https://developer.incode.com/design-and-ux/separator/"
section: "design-and-ux"
group: "Prizma Design Foundations / Components"
version: "v1.1"
status: "live"
---
# Separator

Separators create visual breaks between content sections. Prizma offers a plain horizontal rule and a labeled variant — commonly used to separate primary and alternative authentication methods.

<div class="dh-rule"><span>Variants</span><i></i></div>

<div class="dh-var-grid"><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><span class="dh-pz-separator"><i></i></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#60667c14;color:#60667c">Plain rule</span><code>.separator</code><p>A horizontal rule between content sections.</p></div></div><div class="dh-var" style="background:#006aff08"><div class="dh-var-stage"><span class="dh-pz-separator"><i></i>Or<i></i></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#006aff14;color:#006aff">Labeled</span><code>.separator--label</code><p>Splits alternatives — an Or between two auth methods.</p></div></div><div class="dh-var" style="background:transparent"><div class="dh-var-stage"><span class="dh-pz-separator is-dashed"><i></i></span></div><div class="dh-var-meta"><span class="dh-var-pill" style="background:#9ca3af14;color:#9ca3af">Dashed</span><code>.separator--dashed</code><p>Lighter division inside a single section.</p></div></div></div>

<div class="dh-rule"><span>Tokens</span><i></i></div>

```dh-comp-tokens
--separator-line-color | Horizontal rule color | Component
--separator-text-color | Label text color | Component
--separator-gap | Gap between line and label | Component
```

> 📘 Component tokens
>
> The color tokens for this component live in [Color → Tokens](/design-and-ux/color/), and its spacing, radius, and type map to the shared foundation scales.