Toolbar — ARC UI

Components

Toolbar

layout

hybrid

<arc-toolbar>

Overview

Guidelines

When to use

Use Toolbar above content panels, editors, and detail views for contextual actions
Place the most important action (e.g. Save) in the end slot where users expect it
Use size="sm" for secondary toolbars nested inside panels or split panes
Enable sticky for long scrollable content where the toolbar should remain visible
Group related buttons together in each slot for visual clarity

When not to use

Use Toolbar as the primary site navigation -- use TopBar or NavigationMenu instead
Overload the toolbar with more than five or six controls; move overflow into a DropdownMenu
Nest Toolbar inside another Toolbar -- use a single toolbar with grouped slot content
Disable the border prop when the toolbar sits above content with the same background color
Use Toolbar for status information -- use StatusBar for persistent informational displays

Features

Three-slot layout: start (left-pinned), center (flexible), end (right-pinned)
role="toolbar" for accessible grouping of related controls
Two size variants: md (48px) and sm (36px) for primary and secondary toolbars
Optional bottom border via the border prop (enabled by default)
Sticky positioning with top: 0 and z-index: 50 when sticky is set
Card-colored background (--bg-card) for subtle elevation above the page surface
Exposed CSS parts (base, start, center, end) for targeted ::part() styling
Consistent gap spacing (--space-sm) between slotted controls

Preview

File

Edit

View

Document.txt

Save

Document content area

Usage

Layout and styling work without JavaScript via the HTML/CSS versions. Interactive features like events and state management require the Web Component or a framework wrapper.

<arc-toolbar border>
  <div slot="start"><arc-button variant="ghost" size="sm">File</arc-button></div>
  <span>Document.txt</span>
  <div slot="end"><arc-button variant="ghost" size="sm">Save</arc-button></div>
</arc-toolbar>

import { Button, Toolbar } from '@arclux/arc-ui-react';

<Toolbar border>
  <div slot="start"><Button variant="ghost" size="sm">File</Button></div>
  <span>Document.txt</span>
  <div slot="end"><Button variant="ghost" size="sm">Save</Button></div>
</Toolbar>

<script setup>
import { Button, Toolbar } from '@arclux/arc-ui-vue';
</script>

<template>
  <Toolbar border>
    <div slot="start"><Button variant="ghost" size="sm">File</Button></div>
    <span>Document.txt</span>
    <div slot="end"><Button variant="ghost" size="sm">Save</Button></div>
  </Toolbar>
</template>

<script>
  import { Button, Toolbar } from '@arclux/arc-ui-svelte';
</script>

<Toolbar border>
  <div slot="start"><Button variant="ghost" size="sm">File</Button></div>
  <span>Document.txt</span>
  <div slot="end"><Button variant="ghost" size="sm">Save</Button></div>
</Toolbar>

import { Component } from '@angular/core';
import { Button, Toolbar } from '@arclux/arc-ui-angular';

@Component({
  imports: [Button, Toolbar],
  template: `
    <Toolbar border>
      <div slot="start"><Button variant="ghost" size="sm">File</Button></div>
      <span>Document.txt</span>
      <div slot="end"><Button variant="ghost" size="sm">Save</Button></div>
    </Toolbar>
  `,
})
export class MyComponent {}

import { Button, Toolbar } from '@arclux/arc-ui-solid';

<Toolbar border>
  <div slot="start"><Button variant="ghost" size="sm">File</Button></div>
  <span>Document.txt</span>
  <div slot="end"><Button variant="ghost" size="sm">Save</Button></div>
</Toolbar>

import { Button, Toolbar } from '@arclux/arc-ui-preact';

<Toolbar border>
  <div slot="start"><Button variant="ghost" size="sm">File</Button></div>
  <span>Document.txt</span>
  <div slot="end"><Button variant="ghost" size="sm">Save</Button></div>
</Toolbar>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-toolbar — requires toolbar.css + base.css (or arc-ui.css) -->
<div class="arc-toolbar">
  <div class="toolbar" role="toolbar">
   <div class="toolbar__start">

   </div>
   <div class="toolbar__center">
   Toolbar
   </div>
   <div class="toolbar__end">

   </div>
   </div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-toolbar — self-contained, no external CSS needed -->
<div class="arc-toolbar" style="display: block; font-family: 'Host Grotesk', system-ui, sans-serif">
  <div style="display: flex; align-items: center; height: 48px; padding: 0 16px; background: rgb(13, 13, 18); gap: 8px" role="toolbar">
   <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0">

   </div>
   <div style="display: flex; align-items: center; gap: 8px; flex: 1; justify-content: center">
   Toolbar
   </div>
   <div style="display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto">

   </div>
   </div>
</div>

API

Prop	Type	Default	Description
`sticky`	`boolean`	`false`	When set, the toolbar uses position: sticky with top: 0 and z-index: 50, keeping it visible as the user scrolls through content below.
`size`	`'md' \| 'sm'`	`'md'`	Controls the toolbar height. The default md size is 48px for primary toolbars. The sm size is 36px for secondary or nested toolbars.
`border`	`boolean`	`true`	Renders a subtle bottom border (--border-subtle) to visually separate the toolbar from the content below. Enabled by default.