Divider
The
Divider
component allows users to render a line to divide content with.Basic Usage
Component API
Name | Description | Default |
---|---|---|
variant | "solid" | "dashed" | "dotted" Divider borderStyle | |
size | number | "xs" | "sm" | "md" | "lg" | "xl" Sets height in horizontal orientation and width in vertical | |
label | React.ReactNode Adds text after line in horizontal orientation | |
orientation | "horizontal" | "vertical" Line orientation | |
labelPosition | "center" | "left" | "right" Label position | |
labelProps | Record<string, any> Props spread to Text component in label | |
color | "primary" | "secondary" | "dark" | "gray" | "red" | "pink" | "grape" | "violet" | "indigo" | "blue" | "cyan" | "teal" | "green" | "lime" | "yellow" | "orange" | "success" | "error" | `primary.${number}` | `secondary.${number}` | `dark.${number}` | `gray.${number}` | `red.${number}` | `pink.${number}` | `grape.${number}` | `violet.${number}` | `indigo.${number}` | `blue.${number}` | `cyan.${number}` | `teal.${number}` | `green.${number}` | `lime.${number}` | `yellow.${number}` | `orange.${number}` | `success.${number}` | `error.${number}` Color of the divider. | gray.2 |