Separator

a single or double line, across or down. it can join the frame or the line it meets.

usage

scenario

example

code

import { Separator } from 'charcell/react';

export function SeparatorExample() {
  return <Separator />;
}

<script setup lang="ts">
import { Separator } from 'charcell/vue';
</script>

<template>
  <Separator />
</template>

<script lang="ts">
  import { Separator } from 'charcell/svelte';
</script>

<Separator />

<div class="CharcellSeparator" role="separator"></div>

import { Separator } from 'charcell/react';

export function SeparatorExample() {
  return (
    <div style={{ display: 'grid', height: 'calc(var(--charcell-row) * 5)' }}>
      <Separator orientation="vertical" />
    </div>
  );
}

<script setup lang="ts">
import { Separator } from 'charcell/vue';
</script>

<template>
  <div style="display: grid; height: calc(var(--charcell-row) * 5)">
    <Separator orientation="vertical" />
  </div>
</template>

<script lang="ts">
  import { Separator } from 'charcell/svelte';
</script>

<div style="display: grid; height: calc(var(--charcell-row) * 5)">
  <Separator orientation="vertical" />
</div>

<div style="display: grid; height: calc(var(--charcell-row) * 5)">
  <div
    class="CharcellSeparator CharcellSeparator--vertical"
    role="separator"
    aria-orientation="vertical"
  ></div>
</div>

import { Separator } from 'charcell/react';

export function SeparatorExample() {
  return <Separator decorative />;
}

<script setup lang="ts">
import { Separator } from 'charcell/vue';
</script>

<template>
  <Separator decorative />
</template>

<script lang="ts">
  import { Separator } from 'charcell/svelte';
</script>

<Separator decorative />

<div class="CharcellSeparator" role="none"></div>

import { Separator } from 'charcell/react';

export function SeparatorExample() {
  return <Separator border="double" />;
}

<script setup lang="ts">
import { Separator } from 'charcell/vue';
</script>

<template>
  <Separator border="double" />
</template>

<script lang="ts">
  import { Separator } from 'charcell/svelte';
</script>

<Separator border="double" />

<div
  class="CharcellSeparator CharcellSeparator--border-double"
  role="separator"
></div>

import { Separator } from 'charcell/react';

export function SeparatorExample() {
  return <Separator inset />;
}

<script setup lang="ts">
import { Separator } from 'charcell/vue';
</script>

<template>
  <Separator inset />
</template>

<script lang="ts">
  import { Separator } from 'charcell/svelte';
</script>

<Separator inset />

<div class="CharcellSeparator CharcellSeparator--inset" role="separator"></div>

as text

at rest

────────────────────

props

orientation'horizontal' | 'vertical'= 'horizontal': The line's own axis.
decorativeboolean: Renders it presentation-only (role="none"), for a divider that would be noise to a screen reader.
border'single' | 'double'= 'single': The stroke: single for structure, double for emphasis.
insetboolean: Ends the stroke at its end cells' centers (╶──╴).
join'start' | 'end' | 'both': Runs these ends on to meet the line beyond: a frame's ring when the separator sits directly in its body, or else the line in the next cell (├ ┤ ┬ ┴).

it also takes any other attribute of its <div>.