ActionBar

Container for ActionButtons, creating toolbar layouts inspired by classic file managers.

Import

import { ActionBar, ActionButton } from 'tuimorphic';

Basic Usage

<ActionBar>
  <ActionButton hotkey="N">New</ActionButton>
  <ActionButton hotkey="O">Open</ActionButton>
  <ActionButton hotkey="S">Save</ActionButton>
</ActionBar>

Props

Prop	Type	Default	Description
`position`	`'top' \| 'bottom'`	`'top'`	Visual position styling (affects border placement)
`children`*	`React.ReactNode`	—	ActionButton components or other elements
`className`	`string`	—	Additional CSS class names
`style`	`React.CSSProperties`	—	Inline styles
`ref`	`React.Ref<HTMLDivElement>`	—	Forwarded ref to the container element

Positions

Position: top (default)

Position: bottom

<ActionBar position="top">
  <ActionButton hotkey="1">Action 1</ActionButton>
  <ActionButton hotkey="2">Action 2</ActionButton>
</ActionBar>
 
<ActionBar position="bottom">
  <ActionButton hotkey="1">Action 1</ActionButton>
  <ActionButton hotkey="2">Action 2</ActionButton>
</ActionBar>

The position prop affects border styling to visually anchor the bar to the top or bottom of a container.

With Danger Actions

<ActionBar>
  <ActionButton hotkey="E">Edit</ActionButton>
  <ActionButton hotkey="C">Copy</ActionButton>
  <ActionButton hotkey="D" variant="secondary">Delete</ActionButton>
</ActionBar>

File Manager Style

Classic Norton Commander / Midnight Commander inspired layout:

Status: Ready

<ActionBar>
  <ActionButton hotkey="F1">Help</ActionButton>
  <ActionButton hotkey="F2">Rename</ActionButton>
  <ActionButton hotkey="F3">View</ActionButton>
  <ActionButton hotkey="F4">Edit</ActionButton>
  <ActionButton hotkey="F5">Copy</ActionButton>
  <ActionButton hotkey="F6">Move</ActionButton>
  <ActionButton hotkey="F7">Mkdir</ActionButton>
  <ActionButton hotkey="F8" variant="secondary">Delete</ActionButton>
</ActionBar>

Editor Style

Nano/Pico editor inspired layout with control key notation:

<ActionBar>
  <ActionButton hotkey="^S">Save</ActionButton>
  <ActionButton hotkey="^O">Open</ActionButton>
  <ActionButton hotkey="^X">Cut</ActionButton>
  <ActionButton hotkey="^C">Copy</ActionButton>
  <ActionButton hotkey="^V">Paste</ActionButton>
  <ActionButton hotkey="^Q" variant="secondary">Quit</ActionButton>
</ActionBar>

Mixed Variants

<ActionBar>
  <ActionButton variant="primary" hotkey="Y">Yes</ActionButton>
  <ActionButton variant="secondary" hotkey="N">No</ActionButton>
  <ActionButton variant="secondary" hotkey="C">Cancel</ActionButton>
</ActionBar>

Full Width with Spacer

Use flexbox to space groups of actions:

<ActionBar style={{ width: '100%', justifyContent: 'space-between' }}>
  <div className="flex gap-2">
    <ActionButton hotkey="N">New</ActionButton>
    <ActionButton hotkey="O">Open</ActionButton>
  </div>
  <div className="flex gap-2">
    <ActionButton hotkey="S">Save</ActionButton>
    <ActionButton hotkey="Q" variant="secondary">Quit</ActionButton>
  </div>
</ActionBar>

Layout Patterns

Fixed Bottom Bar

<div style={{ position: 'relative', height: '300px' }}>
  <div style={{ padding: '1rem' }}>
    {/* Content */}
  </div>
  <ActionBar
    position="bottom"
    style={{ position: 'absolute', bottom: 0, left: 0, right: 0 }}
  >
    <ActionButton hotkey="S">Save</ActionButton>
    <ActionButton hotkey="C">Cancel</ActionButton>
  </ActionBar>
</div>

In a Dialog

import { Dialog, ActionBar, ActionButton } from 'tuimorphic';
 
<Dialog title="Confirm Delete">
  <p>Are you sure you want to delete this file?</p>
  <ActionBar position="bottom">
    <ActionButton variant="primary" hotkey="Y">Yes, Delete</ActionButton>
    <ActionButton variant="secondary" hotkey="N">Cancel</ActionButton>
  </ActionBar>
</Dialog>

Accessibility

ActionBar is a semantic div container
ActionButtons inside receive proper focus management
Tab navigation moves between action buttons
Works with screen readers

Styling

Variable	Description
`--theme-border`	Border color
`--theme-background`	Background color

ActionButton - Buttons used inside ActionBar
Button - Standard button component

On this page