Foundation

Separator

Horizontal or vertical rule. Solid by default; dashed for a quieter divider inside cards.

Examples

above

below

quieter

<Card>
  above
  <Separator />
  below
  <Separator dashed />
  quieter
</Card>

left

right

<div style="display:flex; align-items:center; height:24px;">
  left <Separator orientation="vertical" /> right
</div>

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Horizontal renders <hr>; vertical renders a 1px column.
`dashed`	`boolean`	`false`	Swap the solid line for a 1px dashed border.
`class`	`string`	`—`	Extra classes; merged via cn().

CLI

npx @a3tai/mittsu add separator