---
title: Toolbar
---

The `Toolbar` component provides a canvas-style icon toolbar with support for orientations, active states, animated context switching, separators, fan-out sub-panels, and drag & drop onto surfaces.

## Components

| Component | Description |
|---|---|
| `Toolbar` | Container that groups toolbar buttons into a pill-shaped bar |
| `ToolbarButton` | Button with optional icon and optional text, including hover tooltip |
| `ToolbarSeparator` | Visual divider that separates groups of buttons |
| `ToolbarSection` | Section within a toolbar that animates between named contexts |
| `ToolbarContext` | Named context (set of buttons) inside a `ToolbarSection` |
| `ToolbarFanOutItem` | Button that slides out a horizontal sub-panel on click |
| `ToolbarFolder` | Button that reveals a dynamically sized grid of buttons on click |
| `ToolbarGroup` | Formal logical sub-group of toolbar items with an automatic visual separator between adjacent groups |
| `ToolbarSlotProvider` | Context provider that enables the slot system — wrap the application root or a feature boundary |
| `ToolbarSlot` | Renders nothing itself; injects its `children` into the named slot at the given `order` position |