Divider

@coinbase/cds-web@8.34.1

Separates content into sections.

Import

import { Divider } from '@coinbase/cds-web/layout/Divider'

SourceView source codeStorybookView StorybookFigmaView Figma (internal only)

---

Related components

• Box,
• VStack,
• HStack,
• Spacer

---

󰏖

View as Markdown

Horizontal Divider

Loading...

󰙡

Live Code

<VStack width={500} padding={4} gap={2} width="100%">
  <Box background="background" height={100} background="bgAlternate" padding={2} borderRadius="300">
    Content Above
  </Box>
  <Divider direction="horizontal" />
  <Box background="background" height={100} background="bgAlternate" padding={2} borderRadius="300">
    Content Below
  </Box>
</VStack>

Vertical Divider

Loading...

󰙡

Live Code

<HStack height={200} padding={4} gap={2} justifyContent="stretch">
  <Box background="background" background="bgAlternate" padding={2} borderRadius="300" flexGrow={1}>
    Content Left
  </Box>
  <Divider direction="veritical" width={1} />
  <Box background="background" background="bgAlternate" padding={2} borderRadius="300" flexGrow={1}>
    Content Right
  </Box>
</HStack>