This guide outlines how to structure command bar buttons, explains the color system derived from a primary color, and provides clear rules for button hierarchy, ordering, naming conventions, and when to use dropdowns versus buttons. It also includes a practical checklist to validate action bar designs.
1. Core Principle: The P-S-D-E Model
All action bars follow a simple four-category model that determines button appearance, position, and behavior. All buttons are filled (no outline buttons).
| Category | Style | Position | Examples |
|---|---|---|---|
| Primary (P) | Filled Primary Color | Far left (first) | Submit, Approve, Save |
| Secondary (S) | Filled Secondary Color | After Primary | Generate Report, Edit |
| Destructive (D) | Filled Red | After Secondary | Delete, Decline |
| Exit (E) | Filled Soft Gray | Far right (last) | Close, Cancel, Back |
1.1 The Visual Formula
[ Primary ] [ Secondary ] [ Secondary ] ... [ Destructive ] [ Exit ]
← Most important action Least disruptive →
1.2 Example Buttons
2. Color System
The entire skybow color palette is derived from a single Primary Color. This ensures visual coherence across all client deployments while adapting to each client's Corporate Identity.
Get all your colours with our Color Generator.
2.1 Color Derivation Logic
All interactive colors are calculated automatically from the Primary Color:
| Color Token | Derivation | Usage |
|---|---|---|
| Primary |
Base color (client CI) Default: #1A5B5B |
Primary buttons (default state) |
| Primary Hover | Primary darkened 8% | Primary buttons (hover state) |
| Secondary |
Primary at 20% opacity (blended with white) |
Secondary buttons (default state) |
| Secondary Hover |
Primary at 30% opacity (blended with white) |
Secondary buttons (hover state) |
| Secondary Text |
Primary (or darkened) Auto-adjusted for contrast |
Text on Secondary buttons |
Contrast Check: If the Primary Color doesn't meet WCAG AA contrast (4.5:1) against the Secondary background, automatically darken the text color while preserving the hue.
2.2 Fixed Colors (Not Derived)
Some colors remain fixed for universal recognition and accessibility:
| Color Token | Value | Hover | Usage |
|---|---|---|---|
| Destructive Red | #EF4444 | #DC2626 | Delete, Decline, Cancel |
| Success Green | #34D399 | #10B981 | Approve in dropdowns |
| Exit Gray | #E5E7EB | #D1D5DB | Close, Cancel (exit) |
2.3 Button CSS Specification
All buttons share a common base CSS that provides visual separation and consistent spacing:
/* Base Button CSS */
border-width: 4px;
border-style: solid;
border-color: white;
border-radius: 8px;Purpose: The white border creates visual separation between adjacent buttons, making each action clearly distinguishable even when buttons are placed close together.
3. Button Hierarchy Rules
3.1 One Primary Action Per View
Each form or dialog should have exactly one primary (dark filled) button. This represents the main action users should take.
- Correct: One "Submit" as primary (dark), "Save Draft" as secondary (soft)
- Incorrect: Both "Submit" and "Approve" as dark primary buttons
3.2 The "What Moves Forward?" Test
Ask: "Which action moves the workflow forward?" That action is Primary.
- Submit moves an expense request to approval → Primary (dark)
- Generate Report creates output but doesn't advance workflow → Secondary (soft)
- Close exits without changing state → Exit (gray)
3.3 Button Ordering Convention
Always order buttons from left to right by importance and impact (according to P-S-E-D-Model from the top):
| Position | Action Type | Rationale |
|---|---|---|
| 1st | Primary workflow action | Most common action; easy to find |
| 2nd+ | Supporting actions | Related but not primary goal |
| Last -1 | Destructive actions | Requires deliberate choice; not accidental |
| Last | Exit/Close actions | Safe escape; always available |
4. Naming Conventions
4.1 Use Action Verbs
Button labels should clearly describe what will happen:
- Good: "Submit Request", "Generate Report", "Save Draft"
- Avoid: "OK", "Yes", "Proceed"
4.2 Distinguish Close vs. Cancel
These terms have different meanings:
- Close: Exit the view without changes (neutral, safe) → Exit Gray
- Cancel: Abort an in-progress action, may discard changes → Exit Gray (warn user)
- Cancel [Noun]: Terminate something (e.g., "Cancel Contract") → Destructive Red!
4.3 Language Consistency
- Match the interface language: German UI = German buttons, English UI = English buttons
- Use consistent terminology: If you use "Schließen", always use "Schließen" (not sometimes "Abbrechen")
5. When to Use Dropdowns vs. Buttons
5.1 Use a Dropdown When:
- Actions are mutually exclusive (only one can be chosen)
- There are 3+ related options
- Actions share a common category (e.g., all approval-related)
- Space is limited in the action bar
Example: Approval dropdown with Approve, Approve with Comment, Request Info, Decline
5.2 Use Separate Buttons When:
- There are only 2 options
- Actions are fundamentally different (e.g., Edit vs. Delete)
- The primary action should be immediately visible
- Quick access is important for frequent actions
6. Quick Reference Checklist
Before finalising any action bar, verify:
| ☐ | Only ONE primary (dark) button per view |
| ☐ | Primary action is on the LEFT |
| ☐ | Secondary buttons use Secondary color (lighter fill) |
| ☐ | Close/Exit uses soft gray fill and is on the RIGHT |
| ☐ | Destructive actions use fixed red (not derived from Primary) |
| ☐ | All buttons have 4px white border for visual separation |
| ☐ | Text contrast meets WCAG AA (4.5:1 minimum) |
| ☐ | Button labels use clear action verbs |
| ☐ | 3+ related options are grouped in a dropdown |
| ☐ | Language matches the interface (DE or EN consistently) |