Aura Buttons (Mobile) is a premium native button system for Bubble mobile apps. Use one Aura Button element for polished calls to action, icon buttons, image buttons, status actions, selection controls, and async workflow buttons. The plugin combines 100 presets, advanced styling, content composition, motion, badges, loading and result states, Bubble states and events, workflow actions, accessibility controls, and repeat-tap protection in one element.
## Demo App
A configured test app is available for reviewing Aura Buttons (Mobile) presets, content modes, styling, badges, state behavior, workflow actions, layout, and native mobile interaction.
.................
**Bubble Editor Test App:**
https://bubble.io/page?id=ankhsmobile&app_type=mobile&tab=Design&name=Aura+Buttons&type=page**Public Run-Mode Demo:**
https://ankhsmobile.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=Aura%20ButtonsThe test view is named **Aura Buttons**. Use the editor link to inspect element settings and workflows, and use the public run-mode link for the mobile demo.
.................
## Quick Start
1. Add **Aura Button** to a Bubble native mobile view.
2. Pick a preset from **Preset - Style**.
3. Enter the button label and choose a content mode.
4. Configure Iconify, image, or badge content only if your button needs it.
5. Adjust styling, layout, motion, accessibility, and behavior settings as needed.
6. Use Aura states, events, and element actions in Bubble workflows for loading, progress, selection, success, error, and reset flows.
7. Test the final configuration in BubbleGo and on the iOS and Android devices you support.
## Presets and Custom Styling
Aura includes exactly 100 premium alphabetical presets, with **Obsidian Plate** as the default. Presets provide coordinated surface, border, depth, typography, spacing, and motion choices so a button can look polished without manual tuning.
Use **Preset - Customize preset** when you want the configured override fields to replace individual preset values. Leave optional overrides empty when you want the preset to remain in control of that value.
Aura supports advanced styling across background and gradient treatments, borders, highlights, depth and shadow, corner radius and shape, typography, spacing, alignment, and motion. Keep related settings together and make deliberate overrides rather than changing every optional field at once.
## Content Modes
Choose one of seven content modes:
* Text only
* Icon + text
* Text + icon
* Icon only
* Image + text
* Text + image
* Image only
The selected content mode determines how Aura composes the label, Iconify artwork, and image content inside the button.
## Iconify Content
For Iconify modes, set the icon name and then configure the icon family or set, variant, color behavior, size, spacing, and optional icon effect. Aura uses native SVG rendering for supported Iconify artwork.
Iconify artwork can require network access. If a requested icon cannot be retrieved, the plugin uses its available fallback behavior rather than crashing the app. Do not treat remote icon availability as a substitute for testing the exact icons your app uses.
## Image Content
Image modes support a dynamic image URL together with configurable width, height, fit, radius, gap, profile, opacity, overlay, transition timing, effect, and fallback behavior.
Use direct image URLs that the mobile device can reach. Test slow or unavailable image URLs so your chosen fallback behavior is acceptable for the app.
## Badges and Status Adornments
Aura can add optional adornments without requiring a second Bubble element. Badge modes include Off, Dot, Text, Count, and Iconify.
Use badges for unread counts, status, availability, premium markers, notification dots, or compact action context. Configure position, tone, material, colors, dimensions, offsets, motion, and accessibility text as needed.
Count badges support configurable maximum-count behavior and zero handling. Badge motion is subject to the same reduced-motion and performance considerations as the rest of the button.
## Button State Model
Aura resolves visual and interaction state deterministically. The effective priority is:
Disabled > Loading > Error > Success > Pressed > Selected > Default
This means a higher-priority state can temporarily mask a lower-priority one without corrupting it. For example, Loading can hide an active Success result until Loading ends.
Useful published states include:
* Current state
* Is pressed
* Is disabled
* Is loading
* Is selected
* Progress
* Result status
Use these states in Bubble workflows and conditions instead of trying to infer the visual state from styling alone.
## Events
Aura exposes workflow events for:
* tapped
* press started
* press ended
* loading started
* loading ended
* selected
* unselected
* success completed
* error completed
Relevant states are published before dependent transition events so Bubble workflows can read the current value when the event runs.
## Workflow Actions
Aura provides six element actions:
### Set loading
Set Loading to yes or no. Use this while a Bubble workflow or external operation is in progress.
### Set progress
Set determinate progress from 0 to 100. Values outside the range are clamped safely.
### Show success
Show the Success result state. You can optionally override the configured result label and provide an action-specific auto-reset duration.
### Show error
Show the Error result state. You can optionally override the configured result label and provide an action-specific auto-reset duration.
### Reset state
Clear imperative workflow overrides and repeat-protection locks, then return control to the current Bubble property-driven values.
### Set selected
Explicitly set the Selected state to yes or no.
## Property Values and Workflow Overrides
Dynamic Bubble properties are the normal source of truth. Workflow actions can temporarily create per-instance imperative overrides for loading, progress, selected, and result behavior.
Use **Reset state** when the workflow-driven override should end. Reset does not invent a new default. It returns authority to whatever Bubble properties currently evaluate to.
## Result Reset Behavior
Configure **Behavior - Result reset** using one of these strategies:
* Manual
* After delay
* On next tap
* Stay in result state
For After delay, configure the result reset delay in milliseconds.
Show success and Show error can also receive an optional action-specific **Auto reset (ms)** value. When provided, that action-level timing takes precedence for that invocation.
Result reset timing is based on effective visibility. If Disabled or Loading is masking the result, the result timer does not silently expire while the user cannot see the result.
## Tap Debounce, Cooldown, and Single-Fire Protection
Aura includes three independent tools for preventing accidental duplicate actions:
* **Tap debounce (ms)** rejects taps inside the configured debounce window after an accepted tap.
* **Tap cooldown (ms)** blocks new eligible interaction until the cooldown expires.
* **Lock after accepted tap** allows one accepted tap and then locks further taps until Reset state or a lifecycle reset clears the lock.
The compatibility defaults are debounce 0, cooldown 0, and lock off, so ordinary repeated tapping remains available unless you enable protection.
Rejected interactions do not publish the button as Disabled and do not emit the normal tapped event.
## Loading and Result Workflows
A common async pattern is:
1. When Aura is tapped, run **Set loading = yes**.
2. Start the Bubble operation.
3. On success, run **Set loading = no**, then **Show success**.
4. On failure, run **Set loading = no**, then **Show error**.
5. Use the configured result reset mode, or run **Reset state** when the workflow should return to the normal property-driven button.
Use progress values when the operation exposes meaningful determinate progress. Leave progress unused for operations where only an indeterminate loading state is available.
## Motion and Performance
Aura supports press, release, tap, idle, content, image, badge, loading, selected, success, and error motion treatments where the selected preset or settings enable them.
Use the reduced-motion setting to respect device accessibility preferences or explicitly reduce decorative motion. Efficient performance mode can downgrade or suppress expensive decorative effects while preserving button function.
Avoid combining every expressive effect at maximum intensity on large lists of buttons. Test the actual screen density and interaction pattern used by your app.
## Layout and Sizing
Aura supports Bubble native mobile Fixed, Fill, and Fit sizing behavior together with custom button dimensions and spacing controls.
Use the Layout tab for the element's overall placement and sizing, then use Aura's internal padding, content gap, image or icon sizes, and alignment settings for the button's content composition.
Test long labels, Icon only mode, images, badges, and small touch targets on real devices before shipping.
## Accessibility
Use the accessibility label and hint fields when the visible content does not fully describe the action. Aura also supports text scaling behavior and reduced-motion controls.
Loading and Selected behavior expose their effective states so your Bubble logic can remain synchronized with the button's current interaction state.
## Device Test Checklist
Before publishing your app, test the Aura configurations you actually use on BubbleGo and on supported iOS and Android devices:
* Cold startup and navigation back to the Aura view
* Default and customized presets
* Text only, Icon + text, Text + icon, Icon only, Image + text, Text + image, and Image only modes
* Iconify success and network-fallback behavior
* Image loading and fallback behavior
* Dot, Text, Count, and Iconify badges
* Press, release, tap, and idle motion
* Reduced-motion and Efficient performance settings
* Disabled and Selected states
* Loading and progress
* Success and Error results
* Manual, After delay, On next tap, and Stay in result state reset modes
* Action-specific Auto reset timing
* Debounce, cooldown, and single-fire lock
* Reset state returning to Bubble property values
* Rapid repeated interaction
* Multiple Aura Button instances on the same view
* Navigation away and back while timers or result states are active
* Fixed, Fill, Fit, and custom dimensions
* Long labels, accessibility labels, and text scaling
Native motion, layout, image behavior, lifecycle behavior, and performance cannot be fully validated from a desktop browser preview. Use BubbleGo and real devices for final app QA.
Built with 🤍 by ANKHARA Studios.
Built on Bubble
