A horizontal or vertical rule for separating menus, toolbars and content, in three weights.
Examples
Orientations
A horizontal rule and a vertical rule between items.
Above
Below
EditViewShare
<div class="flex flex-col gap-4">
<div>
<p class="text-sm text-gray-500">Above</p>
<UiDivider />
<p class="text-sm text-gray-500">Below</p>
</div>
<div class="flex h-6 items-center gap-3 text-sm text-gray-500">
<span>Edit</span>
<UiDivider direction="vertical" />
<span>View</span>
<UiDivider direction="vertical" />
<span>Share</span>
</div>
</div>Weights
Three colour weights: light, medium and dark.
light
medium
dark
<div class="flex flex-col gap-1">
<p class="text-sm text-gray-500">light</p>
<UiDivider color="light" />
<p class="text-sm text-gray-500">medium</p>
<UiDivider color="medium" />
<p class="text-sm text-gray-500">dark</p>
<UiDivider color="dark" />
</div>Props
| Name | Type | Default | Description |
|---|---|---|---|
| direction | string | 'horizontal' | Orientation. horizontalvertical |
| color | string | 'light' | Line weight/colour. lightmediumdark |