Separator

Props

Title

export const SeparatorTitle = () => {
  return (
    <Paper className="playground" as={Flex} gap="sm" borderColor="opa-6" ="sm" background="bg-3" corner="sm">
      <Separator title="Login Here" />
      <Separator title="Login Here" position="center" />
      <Separator title="Login Here" position="end" />
    </Paper>
  )
}

Color

Type: string
Default: primary
Options: danger | warning | success | primary | bg | secondary

The color prop determines the color of the separator. It accepts a string representing a color name or a color value in hex, rgb, rgba format.

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

export const SeparatorColors = () => {
  return (
    <Paper className="playground" borderColor="opa-6" ="sm" flow="sm" background="bg-3" corner="sm">
      <Separator color="suc" />
      <Separator color="dan" />
      <Separator color="war" />
      <Separator color="pri" />
      <Separator color="sec" />
      <Separator color="bg" />
    </Paper>
  )
}

Thickness

The thickness prop determines the thickness of the separator. It accepts a string representing a length in pixels.

export const SeparatorThickness = () => {
  return (
    <Paper
      className="playground"
      as={Flex}
      gap="sm"
      items="center"
      borderColor="opa-6"
      ="sm"
      flow="sm"
      background="bg-3"
      corner="sm"
    >
      <Separator thickness="3xs" />
      <Separator thickness="2xs" />
      <Separator thickness="xs" />
      <Separator thickness="sm" />
      <Separator thickness="md" />
      <Separator thickness="lg" />
      <Separator thickness="xl" />
      <Separator thickness="2xl" />
      <Separator thickness="3xl" />
    </Paper>
  )
}

Direction

direction (optional)
Type: string

Specifies the direction of the separator line. The direction prop is used to control the orientation of the separator line. It accepts two possible values: "horizontal" and "vertical".

Example usage:

import { Paper, Separator } from '@pillar-ui/core'
export const SeparatorDirection = () => {
  return (
    <Paper className="playground" borderColor="opa-6" ="sm" flow="sm" background="bg-3" corner="sm">
      <Separator direction="horizontal" />
      <Separator direction="vertical" />
    </Paper>
  )
}

Use Case

To visually separate different sections of content. For example, you could use a separator to separate the header of a page from the body of the page, or to separate different paragraphs of text.
To create a sense of hierarchy or order within a layout. For example, you could use a separator to visually group related elements together, or to create a sense of progression or movement.
To emphasize important information. For example, you could use a separator to draw attention to a call to action button, or to highlight a key piece of information.
To create a sense of balance or symmetry within a layout. For example, you could use a separator to balance out two large elements on either side of a page, or to create a sense of visual rhythm.
To add visual interest or texture to a layout. For example, you could use a separator to create a grid pattern, or to add a touch of color or pattern to a page.

These are just a few examples of how separators can be used in design. With a little creativity, you can find many other ways to use separators to improve the look and feel of your designs.

Troubleshooting

Common issues when implementing the Separator component can include incorrect positioning, incorrect styling, or issues with accessibility. Troubleshooting these issues may involve inspecting the HTML and CSS, checking for errors in the code, and testing with different devices and browsers.

Conclusion

The Separator component is a useful UI element for creating visual separation between different sections of content. It can be implemented using HTML and CSS, or with a UI framework or library. When implementing the Separator component, it's important to consider accessibility, TypeScript support, and troubleshooting common issues.

Pillar UI React Separator Component documentation