Custom color for divider and label (theme color key)

color

label

orientation

() => (
  <List>
    <List.Item icon={IconHome}>Home</List.Item>
    <Divider as="li" />
    <List.Item icon={IconSettings}>Settings</List.Item>
    <Divider as="li" />
    <List.Item icon={IconLogOut}>Logout</List.Item>
  </List>
)

Divider

() => (
  <Box width={200} display="flex" flexDirection="row" alignItems="center" justifyContent="center">
    <Typography m={10}>text</Typography>
    <Divider orientation="vertical" as="hr" />
    <Typography m={10}>text</Typography>
    <Divider orientation="vertical" as="hr" />
    <Typography m={10}>text</Typography>
  </Box>
)

PreviewVertical

() => (
  <Box width={500}>
    <Divider color="border.accent" label="New Message" />
  </Box>
)

PreviewWithColorAndLabel

() => (
  <Box>
    <Divider orientation="vertical" color="border.success" label="New Message" />
  </Box>
)

Divider component

Preview Vertical

Preview With Color And Label

Preview Vertical With Color And Label