Separator

The Separator component is a visual divider used to separate content sections. It supports horizontal and vertical orientations, multiple variants (solid, dashed, dotted), customizable colors, and different thicknesses.

Demo

React

VariantSolidDashedDotted

OrientationHorizontalVertical

Color SchemeNeutralPrimarySecondarySuccessWarningDanger

ThicknessExtra SmallSmallMediumLargeExtra Large

OR

Vue

VariantSolidDashedDotted

OrientationHorizontalVertical

Color SchemeNeutralPrimarySecondarySuccessWarningDanger

ThicknessExtra SmallSmallMediumLargeExtra Large

OR

Usage

Basic Separator

React

import { Separator } from '@fintech-sandpit/ui/react';

return (
  <>
    <div>Content above</div>
    <Separator />
    <div>Content below</div>
  </>
);

Vue

<template>
  <div>
    <div>Content above</div>
    <Separator />
    <div>Content below</div>
  </div>
</template>

<script setup lang="ts">
import { Separator } from '@fintech-sandpit/ui/vue';
</script>

Separator with Text

React

import { Separator } from '@fintech-sandpit/ui/react';

return (
  <Separator>
    <span>OR</span>
  </Separator>
);

Vue

<template>
  <Separator>
    <span>OR</span>
  </Separator>
</template>

<script setup lang="ts">
import { Separator } from '@fintech-sandpit/ui/vue';
</script>

Separator with Icon

React

import { Separator, Icon } from '@fintech-sandpit/ui/react';
import { faHome } from '@fortawesome/free-solid-svg-icons';

return (
  <Separator>
    <Icon
      as={faHome}
      size="sm"
      className="text-gray-400"
    />
  </Separator>
);

Vue

<template>
  <Separator>
    <Icon
      :as="faHome"
      size="sm"
      class="text-gray-400"
    />
  </Separator>
</template>

<script setup lang="ts">
import { Separator, Icon } from '@fintech-sandpit/ui/vue';
import { faHome } from '@fortawesome/free-solid-svg-icons';
</script>

Props

React

Name	Type	Required	Default	Description
variant	SeparatorVariant		solid	Style variant of the separator
orientation	SeparatorOrientation		horizontal	Orientation of the separator
colorScheme	ColorScheme		neutral	Color scheme of the separator
thickness	Size		md	Thickness of the separator

Vue

Name	Type	Required	Default	Description
variant	SeparatorVariant		solid	Style variant of the separator
orientation	SeparatorOrientation		horizontal	Orientation of the separator
colorScheme	ColorScheme		neutral	Color scheme of the separator
thickness	Size		md	Thickness of the separator

Types

type SeparatorVariant = 'solid' | 'dashed' | 'dotted'
type SeparatorOrientation = 'horizontal' | 'vertical'
type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'