Cadence Clinical
Primitives

Separator

A rule between two groups of content, announced as a separator.

GradeTested

GeneralReview

Usage

import { Separator } from "@cadence-clinical/ui";

<Separator />
<Separator orientation="vertical" />

Separator is built on the Base UI Separator and follows the shadcn Separator. A vertical separator stretches to the height of the row it sits in.

A separator has no words. For a rule with words in it, such as the day between two days of entries, use a Marker.

Accessibility

  • A separator is announced to a screen reader, so use it where the division means something, such as between two groups in a menu. For a line that is only decoration, use a border.

Props

PropTypeDefault
orientation"horizontal" | "vertical""horizontal"

Select

One choice from a list that opens below the field. A long value wraps and is never truncated.

Skeleton

Holds the place of content that is loading, in the shape it will take. It shows on every surface, and is hidden from assistive technology.

On this page

UsageAccessibilityProps