Toolbar
Toolbar buttons allow users to access navigation or utility options. These elements typically display icons, trigger global settings, or open configuration menus. They appear at the top of functional flows and support events, icons, and read-only display modes.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Toolbar | UI component type |
| Group | Button | Belongs to the "Button" group in UI catalog |
| Identifier | 52 | Unique element ID |
| Preview | ✓ | See image preview above |
| Read-only | Y | Appears but does not allow interaction |
| Text, Icon | Y | Supports both text and icons |
| Event | Y | Triggers an event when clicked |
| Mandatory | Optional unless configured otherwise | |
| Children | No nested children elements | |
| Shade | No background shade option | |
| List | Not a list container | |
| Min | No minimum value requirement | |
| Max | No maximum value constraint |
Usage Example
<ToolbarButton icon="settings" label="Settings" onClick={openSettings} />
SDK Integration
The Reset Password screen uses this element. It links to the SDK method:
Method: /account/reset-password/request
Initiates password recovery. Displays after selecting Forgot password? and prompts the user to enter their email address.
Example UI Placement
| Level | ID | Type | Value | Description |
|---|---|---|---|---|
1 | change-language | Toolbar | Settings | Triggers language selector |
1 | logo | Illustration | AirDr Logo | Static branding image |
1 | send | Button | Send | Submits password reset request |
1 | support | Link | Air Doctor Support | Navigates to support page |
Notes
- This toolbar icon typically appears in the top-right of the screen.
- Use this element for non-primary actions that require global access.
- Combine icons and labels when clarity is needed.