Action Bar

The Action Bar component provides a container for primary and secondary actions in a user interface. It is typically used to display a set of related actions or controls, often at the top or bottom of a page or panel.

Installation

The Action Bar component is part of the Casoon UI Library.

# Installation of the entire library
npm install @casoon/ui-lib

Import

/* Import all UI components */
@import '@casoon/ui-lib/ui.css';

/* Or just the Action Bar component */
@import '@casoon/ui-lib/ui/components/action-bar.css';

Basic Usage

<div class="action-bar">
  <button class="button primary">Save</button>
  <button class="button">Cancel</button>
</div>

Variants

Positioning

The Action Bar can be placed in various positions.

<div class="action-bar top">Actions at the top</div>
<div class="action-bar bottom">Actions at the bottom</div>

Alignment

Control the alignment of actions within the bar.

<div class="action-bar start">Left/start aligned</div>
<div class="action-bar center">Center aligned</div>
<div class="action-bar end">Right/end aligned</div>
<div class="action-bar space-between">With space between</div>

Styles

Various visual styles for the Action Bar.

<div class="action-bar">Standard</div>
<div class="action-bar bordered">With border</div>
<div class="action-bar elevated">Elevated</div>
<div class="action-bar transparent">Transparent</div>

Usage Examples

Form Actions

A common use case for Action Bars is at the bottom of forms.

<form>
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" class="input" />
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" class="input" />
  </div>
  <div class="action-bar space-between">
    <button type="button" class="button">Cancel</button>
    <button type="submit" class="button primary">Submit</button>
  </div>
</form>

Name

Email

Toolbar Style

Action Bars can be used as toolbars with multiple controls.

<div class="action-bar elevated">
  <div class="button-group">
    <button class="button icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M11 4H4v7" /><path d="M4 4l7 7" />
      </svg>
    </button>
    <button class="button icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M20 4h-7v7" /><path d="M20 4l-7 7" />
      </svg>
    </button>
  </div>
  <div class="button-group">
    <button class="button icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M4 20h7v-7" /><path d="M4 20l7-7" />
      </svg>
    </button>
    <button class="button icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M20 20h-7v-7" /><path d="M20 20l-7-7" />
      </svg>
    </button>
  </div>
  <div style="flex: 1;"></div>
  <button class="button primary">Apply</button>
</div>

Customization

The Action Bar can be customized using CSS variables:

:root {
  --action-bar-padding: 0.75rem 1rem;
  --action-bar-gap: 0.5rem;
  --action-bar-bg: var(--color-surface-100);
  --action-bar-border-color: var(--color-neutral-200);
  --action-bar-border-radius: var(--radius-m);
  --action-bar-shadow: var(--shadow-s);
}

Accessibility

• The Action Bar should have a semantically meaningful structure
• Ensure sufficient contrast for buttons within the bar
• Make sure all interactive elements are accessible by keyboard

Browser Compatibility

The Action Bar component is compatible with all modern browsers.

Feature	Chrome	Firefox	Safari	Edge
Basic functionality	✅	✅	✅	✅
CSS Gap property	84+	63+	14.1+	84+
Flex Layout	29+	28+	9+	16+