Extra
The Extra element displays a subtitle or supporting text. Use this element to show secondary information, such as warnings, explanatory notes, or optional instructions. Extra content appears in a subdued visual style to differentiate it from primary content.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Extra | UI component type |
| Group | Text | Part of the Text group |
| Identifier | 16 | Unique element ID |
| Preview | ✓ | Displays the element as a subtitle |
| Max | Lines | May wrap across multiple lines |
| Text, Icon | Y | Supports text and optional inline icons |
| Value | Not a data-entry element | |
| Mandatory | Optional | |
| Error | No validation behavior | |
| Min | Not applicable | |
| Read-only | Always displays as static text | |
| List | Not a list element | |
| Children | Does not accept nested elements | |
| Event | Does not emit interaction events | |
| Shade | No shaded background |
Usage Example
<Extra>Note: the account will be disabled during this period.</Extra>
SDK Integration
The Cancel Appointment screen uses this element to display contextual information about scheduling and account state.
Method: /profile/appointments/{id}/cancel
When the user selects a reason such as vacation, the Extra element displays a message informing that the account will be temporarily disabled.
Example UI Placement
| Level | ID | Type | Value | Description |
|---|---|---|---|---|
1 | note | Extra | Note: the account will be disabled… | Explains the effect of the selected reason |
Notes
- Use Extra elements to inform without drawing primary focus.
- Combine with
Radio,Date, orButtonelements to complete full form layouts. - Avoid embedding action prompts inside this element.