Skip to content

Divider

Renders a visual element that can be used to separate other content.

Usage

When contained in a stack, the divider extends across the minor axis of the stack, or horizontally when not in a stack.

Code
import { createSystem } from 'frog/ui'
 
const { Divider, Row, Rows } = createSystem()
 
function Example() {
  return (
    <Rows gap="8" grow> 
      <Row backgroundColor="red" height="1/2" />
      <Divider />
      <Row backgroundColor="red" height="1/2" />
    </Rows>
  )
}

Divider Properties

color

Sets the color of the divider. Defaults to { custom: 'rgba(255,255,255,0.5)' }.

Code
<Divider color="r
red100
red200
red300
red400
red500
red600
red
red700
red800
red900
red1000
ed" />

direction

Sets the direction of the divider. Defaults to 'auto'.

Code
<Divider direction="
horizontal
vertical
auto
auto" />