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 component
import { Separator } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/separator.css';

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

    <Separator />

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

Vue

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

    <Separator />

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

<script setup lang="ts">
// Import component
import { Separator } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/separator.css';
</script>

Separator with Text

React

// Import component
import { Separator } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/separator.css';

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

Vue

<script setup lang="ts">
import { Separator } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/separator.css';
</script>

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

Separator with Icon

React

// Import components
import {
  Icon,
  Separator,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/icon.css';
import '@fintech-sandpit/ui/style/components/separator.css';
// Import icons
import { faHome } from '@fortawesome/free-solid-svg-icons';

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

Vue

<script setup lang="ts">
// Import components
import {
  Icon,
  Separator,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/icon.css';
import '@fintech-sandpit/ui/style/components/separator.css';
// Import icons
import { faHome } from '@fortawesome/free-solid-svg-icons';
</script>

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

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'