Divider
Divider is a component that represents a division between elements.
Divider is planned to be removed in v2.0. Use Separator instead.
Import
import { Divider } from "@yamada-ui/react"
Usage
Editable example
<Flex direction="column" gap="md"> <For each={["solid", "dashed", "dotted"]}> {(variant, index) => <Divider key={index} variant={variant} />} </For> </Flex>
Draw a vertical dividing line
Editable example
<Flex h="sm" gap="md"> <For each={["solid", "dashed", "dotted"]}> {(variant, index) => ( <Divider key={index} orientation="vertical" variant={variant} /> )} </For> </Flex>
When making the dividing line vertical, you need to set the height to the parent element or Divider.
Edit this page on GitHub