Buttons & Modules

The toolbar shows two kinds of buttons: global ones, always visible, and contextual ones that appear only on certain routes. This page gives you the full picture.

Global buttons

Global buttons are visible on every page (except on excluded routes). They are sorted by priority — higher priority = further left.

Priority	Button	Icon	Function	Visibility
100	Theme toggle	Moon / Sun	Switches between dark and light mode	Always
97	Web-Bridge	QR scanner	Pairing with web.blocq.io	Only when a web-capable module is active
95	Help	Question mark	Opens contextual docs	Always
90	Edit Mode	Pencil	Toggles edit mode on/off	Only when Edit Mode is globally enabled
80	App Builder Tools	Wrench	Opens the tool dashboard	Always

Divider

Between the Edit Mode button and the App Builder Tools button there is an automatic divider that separates the “workflow buttons” (theme/help/edit) from the “tool buttons”.

Theme toggle Dynamic

The icon of this button changes with the current mode:

• Moon icon → you are in light mode (tap → dark mode)
• Sun icon → you are in dark mode (tap → light mode)

Web-Bridge

Appears only when at least one web-capable module is active. Without an active module, pairing would be pointless, so the button is hidden automatically.

On tap, a bottom sheet with a QR code opens, which you scan with the Web-Bridge in the browser.

Help

On tap, the contextual help opens for the page you’re currently on. If you’re in the Forum editor, you’ll land directly in the Forum editor chapter of the docs.

Edit Mode

Toggles the app-wide Edit Mode. In Edit Mode:

• Widgets are shown with editing affordances
• Long-press on widgets opens editors
• “Add” buttons appear where you can insert new content

The icon switches between pencil (edit off) and pencil with strike (edit on).

App Builder Tools

Opens the App Builder Tools dashboard. On a second tap, the dashboard closes again — the button behaves as a toggle.

Module-specific buttons

As soon as a module is active and you’re on one of its routes, its buttons automatically appear. They are separated from the global buttons by a divider.

When do they appear?

The toolbar uses route pattern matching to decide which buttons are visible:

Pattern type	Example	Meaning
Exact	/forum	Matches only /forum, not /forum/123
Sub-routes with /*	/forum/*	Matches all sub-routes (/forum/123), not the base itself
Base + sub-routes with /**	/forum/**	Matches the base route and all sub-routes
Dynamic segments	/admin/rooms/spaces/:id/channels	:id matches any ID
Additional patterns	additionalRoutePatterns: ['/admin/forum']	Button appears on multiple routes

Example: Forum module

On routes /forum and /admin/forum, two extra buttons appear:

Button	Icon	Function
Settings	Sliders	Forum configuration as a bottom sheet
Categories	Category	Switch to category management

Example: Feed module

On /feed and /admin/feed:

Button	Icon	Function
Settings	Sliders	Feed configuration
Templates	Layers	Feed template gallery

Modules with toolbar buttons

The following modules register their own toolbar buttons when activated:

Community

Forum, Feed, Chat, Notifications

Content

Wiki, FAQ, News, Blog, Documents, RSS Feed, Gallery, Portfolio

Commerce

Shop, Orders, Payments, Pricing, Coupons, Menu

Booking

Services, Rooms, Maps

Members

Members, Membership, Sports

Workforce

Shifts, Time Tracking, Leave Management

Learning

Quizzes, Courses, Flashcards

Other

Inventory, Workouts, Tasks, Events, Email, Profile, Settings

Tip

For the concrete buttons a module adds, check that module’s documentation. The list above shows which modules register any toolbar buttons.

Theme Suite editor buttons

The Theme Suite buttons play a special role: they are shown dynamically, depending on which widget editor is currently active in the Theme Suite (e.g. button editor, card editor, input editor).

That way you always get exactly the tools matching the widget you’re editing — without overloading the toolbar.

Sorting & grouping

Buttons are sorted by two criteria:

1. Priority (higher = further left)
2. Group divider: Between global and module-specific buttons a vertical divider appears automatically. Buttons can additionally set hasDividerBefore: true to enforce their own grouping.

Badges

Buttons can show a counter badge in the top-right corner:

• Values 1–99: number is shown directly
• Values ≥ 100: 99+ is shown
• Value 0: no badge

For example, the reports button in the admin area shows the count of open reports. If the toolbar is currently docked, a small notification dot appears on the indicator instead — a hint that something needs attention.

Related topics

• Global Toolbar — Features — all features in detail
• Search — toolbar search and keyboard navigation
• App Builder Tools — what’s behind the wrench button