# divider — Examples

## horizontal (default)

```html
<p>Content above the divider</p>
<divider-ui></divider-ui>
<p>Content below the divider</p>
```

## with label

```html
<button-ui text="Sign in with Google" variant="outline" style="width:100%;"></button-ui>
<divider-ui label="or"></divider-ui>
<button-ui text="Sign in with Email" variant="outline" style="width:100%;"></button-ui>
```

## vertical

```html
<div style="display:flex; align-items:center; gap:var(--a-space-3); height:40px;">
  <span>Home</span>
  <divider-ui vertical></divider-ui>
  <span>Products</span>
  <divider-ui vertical></divider-ui>
  <span>About</span>
  <divider-ui vertical></divider-ui>
  <span>Contact</span>
</div>
```
