Components

Divider

A hairline between groups of content, across a stack or down a row, in the theme's border colour.

Usage

A Divider fills the width of its container. With vertical it runs top to bottom and, in a flex row, stretches to the row's height.

Available$12,480.00

Pending$310.25

Reserved$1,200.00

Balances.svelte

<script>
  import { Divider } from 'sveltier';
</script>

<p>Available</p>
<Divider />
<p>Pending</p>

<!-- In a row, a vertical divider is as tall as the row. -->
<div style="display: flex">
  <Button variant="text">Week</Button>
  <Divider vertical />
  <Button variant="text">Export</Button>
</div>

Accessibility

A Divider is an <hr>, which assistive technology reads as a separator, with aria-orientation when vertical. When it only decorates, add role="presentation".

API

Name	Type	Default	Description
`vertical`	`boolean`	`false`	Runs top to bottom, between items in a row, and stretches to the row's height.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLHRElement \| null`	`–`	The root element, bindable with `bind:ref`.