Divider

Separates two areas with a horizontal or vertical line and an optional label.

Import

tsx
import { Divider } from "@hope-ui/core";

tsx
import { Divider } from "@hope-ui/core";

Usage

The Divider displays a thin horizontal or vertical line, and renders as an <hr> by default.

Variants

Use the variant prop to change the visual style of the divider.

tsx
<VStack spacing={4}>
  <Divider variant="solid" />
  <Divider variant="dashed" />
  <Divider variant="dotted" />
</VStack>

tsx
<VStack spacing={4}>
  <Divider variant="solid" />
  <Divider variant="dashed" />
  <Divider variant="dotted" />
</VStack>

Thickness

You can adjust the thickness of the divider using the thickness prop.

tsx
<Divider thickness="3px" />

tsx
<Divider thickness="3px" />

Vertical orientation

To create a vertical Divider set the orientation prop to vertical.

tsx
<HStack spacing={4}>
  <span>One</span>
  <Divider orientation="vertical" />
  <span>Two</span>
  <Divider orientation="vertical" />
  <span>Three</span>
</HStack>

tsx
<HStack spacing={4}>
  <span>One</span>
  <Divider orientation="vertical" />
  <span>Two</span>
  <Divider orientation="vertical" />
  <span>Three</span>
</HStack>

Divider with label

You can add a label at the start, center or end of the Divider by setting its children.

The labelPlacement prop control its placement and labelProps allow passing props to the underlying <span> element.

tsx
<VStack spacing={4}>
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.
  </Text>
  <Divider>Start</Divider>
  <Text>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.
  </Text>
  <Divider labelPlacement="center">Center</Divider>
  <Text>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
    beatae vitae dicta sunt explicabo.
  </Text>
  <Divider labelPlacement="end">End</Divider>
  <Text>
    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
    consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci
    velit, sed quia non numquam eius modi.
  </Text>
  <Divider
    labelPlacement="center"
    labelProps={{
      display: "flex",
      alignItems: "center",
      gap: 1,
    }}
  >
    <SearchIcon boxSize={5} />
    <Text fontWeight="semibold" fontSize="lg">
      Custom label
    </Text>
  </Divider>
  <Text>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
    deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
    provident
  </Text>
</VStack>

tsx
<VStack spacing={4}>
  <Text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.
  </Text>
  <Divider>Start</Divider>
  <Text>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.
  </Text>
  <Divider labelPlacement="center">Center</Divider>
  <Text>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
    laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
    beatae vitae dicta sunt explicabo.
  </Text>
  <Divider labelPlacement="end">End</Divider>
  <Text>
    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
    consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci
    velit, sed quia non numquam eius modi.
  </Text>
  <Divider
    labelPlacement="center"
    labelProps={{
      display: "flex",
      alignItems: "center",
      gap: 1,
    }}
  >
    <SearchIcon boxSize={5} />
    <Text fontWeight="semibold" fontSize="lg">
      Custom label
    </Text>
  </Divider>
  <Text>
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
    deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
    provident
  </Text>
</VStack>

Labels also work with vertical divider.

tsx
<HStack spacing={4}>
  <Text flex={1}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
  </Text>
  <Divider orientation="vertical" labelPlacement="center">
    Or
  </Divider>
  <Text flex={1}>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.
  </Text>
</HStack>

tsx
<HStack spacing={4}>
  <Text flex={1}>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
  </Text>
  <Divider orientation="vertical" labelPlacement="center">
    Or
  </Divider>
  <Text flex={1}>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
    mollit anim id est laborum.
  </Text>
</HStack>

Theming

Use the DividerTheme type to override Divider styles and default props when extending Hope UI theme.

tsx
import { extendTheme, DividerTheme } from "@hope-ui/core";
const theme = extendTheme({
  components: {
    Divider: {
      // ...overrides
    } as DividerTheme,
  },
});

tsx
import { extendTheme, DividerTheme } from "@hope-ui/core";
const theme = extendTheme({
  components: {
    Divider: {
      // ...overrides
    } as DividerTheme,
  },
});

Component parts

Props