Separator

<hr> / vertical rule, optional label

A rule between things. Horizontal, it is a real <hr> — a thematic break assistive tech announces — unless you say decorative, which is right for a line that only tidies a layout (between icons in a toolbar, under a header). Vertical needs a flex row with align-items: stretch to have a height. label puts a word in the middle — the "— or —" between two sign-in methods — as plain text between two hairlines.

Three colours: border (the hairline), rule (the text colour — the source site's heavy rules under section titles), and accent, which is only for a rule that marks something chosen — like every other part, a separator is never accent at rest. It comes with a little block margin; override it when the layout supplies its own. An inline dash in a line of text is Dash.

Basic

---

2019.04.04

第1話

or

<script setup lang="ts">
import { BlessSeparator } from "blessing-ui";
</script>

<template>
  <div class="col" style="max-width: 480px">
    <BlessSeparator />
    <div class="row" style="height: 40px; align-items: stretch">
      <span>2019.04.04</span><BlessSeparator orientation="vertical" color="rule" /><span
        >第1話</span
      >
    </div>
    <BlessSeparator label="or" />
  </div>
</template>

Usage

import { BlessSeparator } from "blessing-ui";

API

Props

Name	Type	Default	Description
orientation	"horizontal" | "vertical"	"horizontal"
decorative	boolean	false	purely visual (aria-hidden) vs semantic <hr>
color	"accent" | "border" | "rule"	"border"
label	string	—	optional centered label