Secondary
Secondary buttons allow users to select secondary or non-critical actions. This element supports labels, icons, events, and conditional read-only states. Common use cases include choosing among options in a flow.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Secondary | UI component type |
| Group | Button | Belongs to the "Button" group in UI catalog |
| Identifier | 43 | 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
<Button variant="secondary" label="Company A" onClick={handleSelectCompany} />
SDK Integration
The Walk-in Coverage screen uses this element. It links to the SDK method:
Method: walk-in/coverage
Prompts the doctor to select the patient’s insurance provider before proceeding.
Example UI Placement
| Level | ID | Type | Value | Description |
|---|---|---|---|---|
1 | company a | Secondary | Company A's name | Coverage option selection |
1 | company b | Secondary | Company B's name | Coverage option selection |
Notes
- This button appears in lists where the user selects between multiple named options.
- The background uses a soft fill to distinguish it from primary actions.
- Suitable for flow steps where the user selects but does not confirm a final action.