Ghost
Ghost buttons perform secondary or destructive actions. They appear with no background and minimal styling, typically used for actions like removing or dismissing content. These buttons support labels, icons, and event triggers.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Ghost | UI component type |
| Group | Button | Belongs to the "Button" group in UI catalog |
| Identifier | 19 | 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 | |
| List | Not a list container | |
| Min | No minimum value requirement | |
| Max | No maximum value constraint |
Usage Example
<Button variant="ghost" label="Remove" onClick={handleRemove} icon="trash" />
SDK Integration
This element appears in the Visit Took Place (VTP) document management screen and links to the SDK method:
Method: /profile/appointments/{id}/summary/summaries
Enables upload, update, or removal of medical documents after a visit. This screen includes options to select a document type, enter a name, and attach a file.
Example UI Placement
| Level | ID | Type | Value | Description |
|---|---|---|---|---|
1 | — | Edit | — | Header text and close button |
1 | remove | Ghost | Remove | Removes uploaded document |
Notes
- Ghost buttons often appear near destructive or dismissal actions.
- Place them near confirmation dialogs or secondary choices.
- Use icons where applicable to clearly indicate function.