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

ThicknessSmallMediumLarge

OR

Vue

VariantSolidDashedDotted

OrientationHorizontalVertical

ThicknessSmallMediumLarge

OR

Example

Basic Separator

React

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

return (
  <div>
    <div>...</div>

    <Separator />

    <div>...</div>
  </div>
);

Vue

<template>
  <div>
    <div>...</div>

    <Separator />

    <div>...</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	Default	Description
variant	SeparatorVariant	solid	Style variant of the separator
orientation	SeparatorOrientation	horizontal	Orientation of the separator
thickness	SeparatorThickness	md	Thickness of the separator

Vue

Name	Type	Default	Description
variant	SeparatorVariant	solid	Style variant of the separator
orientation	SeparatorOrientation	horizontal	Orientation of the separator
thickness	SeparatorThickness	md	Thickness of the separator

Types

type SeparatorOrientation = 'horizontal' | 'vertical'
type SeparatorThickness = 'sm' | 'md' | 'lg'
type SeparatorVariant = 'solid' | 'dashed' | 'dotted'