Buttons & Actions
Notification Button
A notification-only icon button for the builder. It is dedicated to opening BuilderNotificationModal and showing unread count as a badge, with no generic action map behavior.
Purpose-built for notification modal opening and unread badge display.
Icon choices are intentionally restricted to three notification-relevant options.
Handles old icon-button keys and normalizes legacy size/icon values safely.
Four things worth knowing
Notification modal trigger only
In preview mode, pressing the button opens BuilderNotificationModal and does not route through generic actions like URL or screen navigation.
Unread badge integration
Receives unread count updates through the modal callback (onUnreadCountChange) and reflects state in badge UI.
Runtime normalization for old data
Legacy numeric sizes are mapped to small/medium/large, and invalid icon values fallback to notifications.
Backwards key migration exists
Old saved icon-button components are migrated to notification-button during rehydration.
Code map: component in BuilderNotificationButton.tsx, registry key notification-button, property-editor icon behavior in ComponentPropertyEditor.tsx, migration in rehydrateComponents.ts, and current legacy canvas sizing under componentDimensions.ts case ‘icon-button’.
Find it, drop it, open notifications
Where to find itAdd Notification Button
- Add Notification Button from builder components.
- Place it on the target screen.
- Open preview mode and tap to open the notification modal.
Before you publishThree things to check
- Choose one of the three allowed icons:
notifications,mail, oralert-circle. - Set size to
small,medium, orlargeand confirm badge colors are readable. - Validate modal title/subtitle text and preview opening behavior before publishing.
Editable notification button properties
| Prop | Type | Default | Description |
|---|---|---|---|
iconName | select | notifications | Allowed values: notifications, mail, alert-circle. |
size | select | medium | Allowed values: small, medium, large (legacy numeric values normalized). |
backgroundColor, iconColor, borderRadius, borderWidth, borderColor | style | Registry defaults | Core surface, icon tint, and outline styling for the button. |
badgeColor, badgeTextColor | style | Registry defaults | Unread badge background and count text colors. |
notificationTitle, notificationSubtitle, notificationShowSubtitle | string / boolean | Registry defaults | Modal header content shown when notification modal opens. |
isPreview, modal callbacks, unread callback | runtime | Injected | Controls preview-only opening and unread count synchronization from modal. |
Make it yours
This component stays intentionally minimal and notification-focused. Customize icon, size, modal header copy, and badge/surface styling only.
| Prop | Default | What it controls |
|---|---|---|
iconName, size | notifications, medium | Icon choice and overall button footprint for notification trigger placement. |
backgroundColor, iconColor | Registry defaults | Primary contrast and readability of the notification icon button. |
borderRadius, borderWidth, borderColor | Registry defaults | Edge shape and outline style. |
badgeColor, badgeTextColor | Registry defaults | Unread badge visibility and count readability. |
notificationTitle, notificationSubtitle, notificationShowSubtitle | Registry defaults | Modal heading copy shown when opening notifications. |
Common troubleshooting notes
Component not found: icon-button
Old saved key detected. Rehydration migration handles icon-button → notification-button; do a full app reload so rehydration runs.
TypeError around size map lookup
Usually caused by old numeric size values. Ensure getNormalizedSize runs before size-map usage.
Unexpected icon appears
Legacy invalid icon values should be normalized by getNormalizedIcon and fallback to notifications.
Keep all change points synced
When modifying this component, update component props, registry defaults/definitions, rehydrate migration, property editor icon handling, and source collection bundle sync.