Usage

import { Separator } from '@pillar-ui/core'

<Separator />

Examples

Title

Login Here

Other Option

import { Separator } from '@pillar-ui/core'

export const SeparatorTitle = () => {
  return (
    <>
      <Separator title="Login Here" />
      <Separator title="Other Option" />
    </>
  )
}

Position

Default

start

Type

'start' | 'center' | 'end'

Login Here

import { Separator } from '@pillar-ui/core'

export const SeparatorPosition = () => {
  return (
    <>
      <Separator title="Login Here" position="start" />
      <Separator title="Login Here" position="center" />
      <Separator title="Login Here" position="end" />
    </>
  )
}

Color

Default

b

Type

'i' | 'd' | 'su' | 'se' | 'w' | 'p' | 'b' | 'o'

import { Separator } from '@pillar-ui/core'

export const SeparatorColor = () => {
  return (
    <>
      <Separator color="su" />
      <Separator color="d" />
      <Separator color="w" />
      <Separator color="p" />
      <Separator color="se" />
      <Separator color="b" />
      <Separator color="i" />
    </>
  )
}

Thickness

Default

3

Type

'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9'

import { Separator } from '@pillar-ui/core'

export const SeparatorThickness = () => {
  return (
    <>
      <Separator thickness="1" />
      <Separator thickness="2" />
      <Separator thickness="3" />
      <Separator thickness="4" />
      <Separator thickness="5" />
      <Separator thickness="6" />
      <Separator thickness="7" />
      <Separator thickness="8" />
      <Separator thickness="9" />
    </>
  )
}

Direction

Default

horizontal

Type

'horizontal' | 'vertical'

import { Separator } from '@pillar-ui/core'

export const SeparatorDirection = () => {
  return (
    <>
      <Separator direction="horizontal" />
      <Separator direction="vertical" />
    </>
  )
}