Separator

Kildekode på GitHub · Les som Markdown

Separator er en enkel visuell skillelinje som brukes for å dele opp innhold. Bygget på Radix UI Separator med riktig semantikk og ARIA-attributter.

Importering

import { Separator } from "@kilden/designsystem";

Horisontal (standard)

<div>
<div style={{ marginBottom: "1rem" }}>
  <h4 style={{ fontWeight: 600, margin: "0 0 0.25rem 0" }}>Bekk Designsystem</h4>
  <p style={{ margin: 0, fontSize: "0.875rem", opacity: 0.7 }}>
    Et åpent designsystem for Bekk-produkter.
  </p>
</div>
<Separator />
<div style={{ display: "flex", gap: "1rem", marginTop: "1rem", fontSize: "0.875rem" }}>
  <span>Dokumentasjon</span>
  <span>Kildekode</span>
  <span>Changelog</span>
</div>
</div>

Vertikal

Bruk orientation="vertical" for en vertikal skillelinje. Nyttig mellom elementer i en horisontal layout.

<div style={{ display: "flex", alignItems: "center", gap: "1rem", height: "2rem" }}>
<span style={{ fontSize: "0.875rem" }}>Blog</span>
<Separator orientation="vertical" />
<span style={{ fontSize: "0.875rem" }}>Dokumentasjon</span>
<Separator orientation="vertical" />
<span style={{ fontSize: "0.875rem" }}>Kildekode</span>
</div>

I en liste

<div style={{ maxWidth: "20rem" }}>
<div style={{ padding: "0.75rem 0" }}>
  <p style={{ fontWeight: 500, margin: "0 0 0.25rem 0" }}>Profil</p>
  <p style={{ fontSize: "0.875rem", margin: 0, opacity: 0.7 }}>Vis og rediger profilen din</p>
</div>
<Separator />
<div style={{ padding: "0.75rem 0" }}>
  <p style={{ fontWeight: 500, margin: "0 0 0.25rem 0" }}>Innstillinger</p>
  <p style={{ fontSize: "0.875rem", margin: 0, opacity: 0.7 }}>Tilpass applikasjonen</p>
</div>
<Separator />
<div style={{ padding: "0.75rem 0" }}>
  <p style={{ fontWeight: 500, margin: "0 0 0.25rem 0" }}>Varsler</p>
  <p style={{ fontSize: "0.875rem", margin: 0, opacity: 0.7 }}>Konfigurer varslingsinnstillinger</p>
</div>
</div>

Bruksanbefalinger

Seksjon A

Seksjon B

Bruk for å gruppere relatert innhold

Separator gir visuell struktur og hjelper brukeren å skille mellom ulike seksjoner.

Linje 1

Linje 2

Linje 3

Linje 4

Ikke overbruk separatorer

For mange skillelinjer skaper visuell støy. Bruk mellomrom (spacing) som primær metode for å skille innhold, og separator kun der det trengs en tydelig visuell grense.

Tilgjengelighet

Dekorativ som standard (decorative={true}) — rendrer med role="none" og ignoreres av skjermlesere
Sett decorative={false} for semantisk separering, som gir role="separator" og aria-orientation
Bruk dekorativ modus for visuell separering og semantisk modus når skillelinjen markerer en meningsfull grense

Props

Prop	Type	Default	Beskrivelse
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Retningen på skillelinjen
`decorative`	`boolean`	`true`	Om separatoren er dekorativ (ignorert av skjermlesere)