Toolbar

Horizontal toolbar for actions and tools.

Basic usage

<div class="kit-toolbar">
  <button class="kit-toolbar-item">New</button>
  <button class="kit-toolbar-item">Open</button>
  <div class="kit-toolbar-separator"></div>
  <button class="kit-toolbar-item">Cut</button>
  <button class="kit-toolbar-item">Copy</button>
  <button class="kit-toolbar-item">Paste</button>
  <div class="kit-toolbar-separator"></div>
  <button class="kit-toolbar-item -disabled">Undo</button>
</div>

With buttons

<div class="kit-toolbar">
  <button class="kit-button -small -primary">Save</button>
  <button class="kit-button -small">Cancel</button>
  <div class="kit-toolbar-separator"></div>
  <button class="kit-toolbar-item -active">Bold</button>
  <button class="kit-toolbar-item">Italic</button>
</div>

Flat

<div class="kit-toolbar -flat">
  <button class="kit-toolbar-item">Action 1</button>
  <button class="kit-toolbar-item">Action 2</button>
</div>

Compact

<div class="kit-toolbar -compact">
  <button class="kit-toolbar-item">New</button>
  <button class="kit-toolbar-item">Open</button>
  <div class="kit-toolbar-separator"></div>
  <button class="kit-toolbar-item">Save</button>
</div>