SONAX Application UI

Divider

Demos

Default

import { Divider, Box, Stack, spacing} from 'sxa-ui'

function Demo() {
  return (
    <Stack gap={spacing.xxs} direction={Stack.directions.vertical} alignItems={Stack.alignItems.center}>
      <Box style={{
        background: '#fff',
        height: '20px',
        width: '100%'
      }}/>
      <Divider  />
      <Box style={{
        background: '#fff',
        height: '20px',
        width: '100%'
      }}/>
     </Stack>

  )
}

export default Demo

Vertical

import { Divider, Box, Stack, spacing} from 'sxa-ui'

function Demo() {
  return (
     <Stack gap={spacing.xxs}  alignItems={Stack.alignItems.center}>
      <Box style={{
        background: '#fff',
        height: '20px',
        width: '100%'
      }}/>
      <Divider  direction={Divider.directions.vertical}/>
      <Box style={{
        background: '#fff',
        height: '20px',
        width: '100%'
      }}/>
     </Stack>
  )
}

export default Demo