Separator
To implement the Separator component into your project you’ll need to add the import:
import Separator from "@kiwicom/orbit-components/lib/Separator";
After adding import to your project you can use it simply like:
<Separator />
Props
The table below contains all types of props available in the Separator component.
| Name | Type | Default | Description |
|---|---|---|---|
| sideOffset | enum | "none" | Amount of padding expressed as spacing tokens in the opposite direction depending on the align prop. |
| align | enum | "left" | The direction of indentation. If "center" then it’s indented from both sides. |
| spaceAfter | enum | Additional margin-bottom after component. | |
| type | enum | "solid" | The type of the separator. |
| color | enum | The color of the separator. The value should be a string with the value of a Tailwind border color class valid in Orbit. | |
| label | React.ReactNode | Optional text or content displayed within the separator line | |
| ariaHidden | boolean | If true, hides the separator from screen readers. Use when the separator is purely decorative. |
enum
| sideOffset | align | type | spaceAfter | color (examples) |
|---|---|---|---|---|
"none" | "left" | "solid" | "none" | "border-blue-normal" |
"300" | "right" | "dashed" | "smallest" | "border-green-normal" |
"400" | "center" | "dotted" | "small" | "border-red-normal" |
"600" | "double" | "normal" | "border-ink-normal" | |
"800" | "none" | "medium" | "border-product-normal" | |
"1000" | "large" | … and many more | ||
"largest" |