logo-icon
STWUI

Divider

Divider will be used to separate content vertically or horizontally.

Divider

Divider
Divider

svelte
<script lang="ts">
	import { Divider, Button } from 'stwui';

	const plus_circle = "svg-path";
</script>

<Divider>
   <Divider.Label slot="label">
      <h3>Divider</h3>
   </Divider.Label>
</Divider>
<Divider>
   <Divider.Icon slot="icon" data={plus_circle} />
</Divider>
<Divider position="left">
   <Divider.Label slot="label">Divider</Divider.Label>
</Divider>
<Divider position="right">
   <Divider.Label slot="label">Divider</Divider.Label>
</Divider>
<Divider>
   <Button type="primary">I am a Button</Button>
</Divider>

Divider Props

position 'left' | 'center' | 'right' center

Divider Slots

label <Divider.Label slot="label" />
icon <Divider.Icon slot="icon" />
default

Divider.Label Slots

default

Divider.Icon Props

data string (IconData)
viewBox string 0 0 24 24
size string 24px
width string 24px
height string 24px
color string currentColor
stroke string | undefined
fill string currentColor