Toolbar

class ui.toolbar.Toolbar()

A basic vertical toolbar component for stacking buttons and other interactive elements.

This component provides a flexible container with consistent spacing and alignment for toolbar buttons. It automatically arranges child elements vertically with proper gaps and centers them within a fixed-width container.

Examples

<hoops-toolbar>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
</hoops-toolbar>

<script>
  const toolbar = document.getElementsByTagName("hoops-toolbar")[0];
  // Toolbar will automatically arrange children vertically
</script>

Custom Element

hoops-toolbar

Slots

- Default slot for toolbar buttons and other interactive elements

CSS Properties

–hoops-dropdown-gap

Gap spacing for dropdown elements within the toolbar (default: 0.8rem)

Since

2025.7.0

Index

Constructors

Constructors

ui.toolbar.Toolbar.constructor()
Toolbar(): Toolbar

Returns: Toolbar