# toolbar — Examples

## basic

```html
<toolbar-ui bordered>
  <button-ui icon="text-b" variant="ghost" size="sm"></button-ui>
  <button-ui icon="text-italic" variant="ghost" size="sm"></button-ui>
  <button-ui icon="text-underline" variant="ghost" size="sm"></button-ui>
  <button-ui icon="text-strikethrough" variant="ghost" size="sm"></button-ui>
</toolbar-ui>
```

## bordered

```html
<toolbar-ui>
  <button-ui icon="arrow-left" variant="ghost" size="sm"></button-ui>
  <button-ui icon="arrow-right" variant="ghost" size="sm"></button-ui>
  <divider-ui vertical></divider-ui>
  <button-ui icon="arrow-clockwise" variant="ghost" size="sm"></button-ui>
</toolbar-ui>
```

## with dividers

```html
<toolbar-ui>
  <toolbar-group-ui>
    <button-ui icon="text-b" variant="ghost" size="sm"></button-ui>
    <button-ui icon="text-italic" variant="ghost" size="sm"></button-ui>
    <button-ui icon="text-underline" variant="ghost" size="sm"></button-ui>
  </toolbar-group-ui>
  <divider-ui vertical></divider-ui>
  <toolbar-group-ui>
    <button-ui icon="text-align-left" variant="ghost" size="sm"></button-ui>
    <button-ui icon="text-align-center" variant="ghost" size="sm"></button-ui>
    <button-ui icon="text-align-right" variant="ghost" size="sm"></button-ui>
  </toolbar-group-ui>
  <divider-ui vertical></divider-ui>
  <toolbar-group-ui>
    <button-ui icon="list-bullets" variant="ghost" size="sm"></button-ui>
    <button-ui icon="list-numbers" variant="ghost" size="sm"></button-ui>
  </toolbar-group-ui>
</toolbar-ui>
```
