UX Toolbox

UX components for your Bubble.io app


UX Toolbox is a set of UX components that enables you to quickly develop on Bubble.io without having to reinvent the wheel.



Setup

To get started, please enter the fonts and primary color you want to use globally with the UX Toolbox components.

UX Toolbox - Plugin Setup

Workflow - Show message

To show a message, call the method UX Toolbox | Show Message

Parameters

NameTypeDescriptionDefaultMandatory
IconChoiceHeroicons IconCheckCircleNo
Icon ColorColor-#52C41ANo
ContentTextContent to displayNoneYes
Content ColorColor-#2F3647No
DurationNumberMessage duration in seconds3sNo

To get the list of available icons, you can visit the Heroicons website


Workflow - Show notification

To show a notification, call the method UX Toolbox | Show Notification

Parameters

NameTypeDescriptionDefaultMandatory
IconChoiceHeroicons IconCheckCircleNo
Icon ColorColor-#52C41ANo
PlacementChoiceNotification positionTopNo
MessageTextNotification titleNoneYes
DescriptionTextNotification descriptionNoneYes
DurationNumberNotification duration in seconds3sNo

To get the list of available icons, you can visit the Heroicons website


Component - Spin

Setup

Add the element UX Toolbox | Spin to your page.

Parameters

NameTypeDescriptionDefaultMandatory
SizeChoiceSize between small, default, largedefaultNo
TipTextDisplay a message under the spinLoadingNo

Component - Rate

Setup

Add the element UX Toolbox | Rate to your page.

Parameters

NameTypeDescriptionDefaultMandatory
TooltipsTextDisplay a tooltip for each rate (Strings separated by a new line)NoneNo
CountNumberStar count5No
Default ValueNumberDefault value on load0No
Read OnlyCheckboxDisable editionFalseNo
Allow HalfCheckboxAllow user to select half starFalseNo
Allow ClearCheckboxAllow clearing by clicking on itFalseNo

States

  • Value: current rate value (number)

Component - Phone input

Setup

Add the element UX Toolbox | Phone Input to your page.

Parameters

NameTypeDescriptionDefaultMandatory
Border ColorColorInput border color#D9D9D9No
RoundnessNumberInput border roundness7No
Valid MessageTextMessage to display when phone is validValidNo
Valid Message colorColorMessage color#008B6DNo
Invalid MessageTextMessage to display when phone is invalidInvalidNo
Invalid Message ColorColorMessage color#CE2D34No
Number TypeDropdownType of phone (All, Mobile, Fixed line)ALLNo
Lookup User CountryCheckboxUse geolocation to set default country for current userFalseNo
National ModeCheckboxHide country prefix in the placeholderFalseNo
Default ValueTextSet a default phone valueNoneNo
Only CountriesTextShow only some countries (Strings separated by a new line)NoneNo

States

  • Value: current phone value (text)
  • Value Without Prefix: current phone value without country prefix (text)
  • Is Valid: is current phone format is valid (boolean)

Component - Date picker

Setup

Add the element UX Toolbox | Date Picker to your page.

Parameters

NameTypeDescriptionDefaultMandatory
TypeChoiceDate type between date, week, month, quarter and yeardateNo
SizeChoiceInput size (small, medium, large)mediumNo
PlacementChoiceInput placement ( Bottom Left, Bottom Right, Top Left, Top Right)Bottom LeftNo

Exposed States

  • Value: selected value (date)

Component - Range picker

Setup

Add the element UX Toolbox | Range Picker to your page.

Parameters

NameTypeDescriptionDefaultMandatory
TypeChoiceDate type between date, week, month, quarter and yeardateNo
SizeChoiceInput size (small, medium, large)mediumNo
PlacementChoiceInput placement ( Bottom Left, Bottom Right, Top Left, Top Right)Bottom LeftNo

States

  • Begin Date: selected start value (date)
  • End Date: selected end value (date)

Component - Time picker

Setup

Add the element UX Toolbox | Time Picker to your page.

Parameters

NameTypeDescriptionDefaultMandatory
SizeChoiceInput size (small, medium, large)mediumNo
PlacementChoiceInput placement ( Bottom Left, Bottom Right, Top Left, Top Right)Bottom LeftNo
Use 12h formatCheckboxUse 12h or 24h time formatTrueNo
Hour StepNumberDefault step for hours1No
Minute StepNumberDefault step for minutes1No

States

  • Date: selected time (date)

Component - Color picker

Setup

Add the element UX Toolbox | Color Picker to your page.

Parameters

NameTypeDescriptionDefaultMandatory
Default FormatChoiceDefault color format (Hex, RGB, HSB)HexNo
Default ValueColorDefault value on load#655CD5No
Allow ClearCheckboxDisplay a clear value iconNoNo
PlacementChoiceInput placement ( Bottom Left, Bottom Right, Top Left, Top Right)Bottom LeftNo
Presets ColorTextShow a list of recommanded colors (Strings separated by a new line)NoneNo
Presets LabelTextLabel for the presets colorRecommandedNo

States

  • RGB Color String: RGB code for the selected color (text)
  • Hex Color String: Hex code for the selected color (text)
  • HSB Color String: HSB code for the selected color (text)
  • RGB Color Array: RGB code for the selected color (array<Text>)

Component - Countries

Setup

Add the element UX Toolbox | List to your page and select countries as type.

Parameters

NameTypeDescriptionDefaultMandatory
TypeChoiceType to render - countriesNoneYes
PlaceholderTextPlaceholder valueSelect a valueNo
Select ModeChoiceAllow single or multiple valuessingleNo
Input SizeChoiceInput size between small, middle, largemiddleNo
Input WidthNumberInput width in px250No
Default ValueTextSet a default value on loadNoneNo

States

  • Value: selected country
  • Values: selected countries when select mode is multiple

Component - Timezone

Setup

Add the element UX Toolbox | List to your page and select timezones as type.

Parameters

NameTypeDescriptionDefaultMandatory
TypeChoiceType to render - timezonesNoneYes
PlaceholderTextPlaceholder valueSelect a valueNo
Select ModeChoiceAllow single or multiple valuessingleNo
Input SizeChoiceInput size between small, middle, largemiddleNo
Input WidthNumberInput width in px250No
Default ValueTextSet a default value on loadNoneNo

States

  • Value: Selected timezone
  • Values: Selected timezones when select mode is multiple

Component - Switch

Setup

Add the element UX Toolbox | Switch to your page.

Parameters

NameTypeDescriptionDefaultMandatory
CheckedCheckboxDefault value on loadFalseNo
DisabledCheckboxIs switch disabled?FalseNo
SizeChoiceSize between small and defaultdefaultNo
TypeChoiceSwitch type (default, text, icon)defaultNo

States

  • Value: switch value (boolean)

Events

  • Is Changed: trigger when the checked state is changing

Component - Radio

Setup

Add the element UX Toolbox | Radio to your page.

Parameters

NameTypeDescriptionDefaultMandatory
OptionsTextRadio optionsNoneYes
Default ValueTextDefault radio valueNoneYes
SizeChoiceRadio Input SizedefaultNo
Button StyleChoiceChoose between outline and solid radiosolidNo
Option TypeChoiceChoose between default and buttondefaultNo

Exposed States

  • Value: radio value (text)

Component - Tooltip

Setup

Add the element UX Toolbox | Tooltip to your page.

Parameters

NameTypeDescriptionDefaultMandatory
Element IDTextID of the element to targetNoneYes
Tooltip ContentTextContent to displayNoneYes
PlacementChoiceTooltip position relative to the elementtopNo
Background ColorColor-#484554No
Text ColorColor-#FFFFFFNo

Component - Popover

Setup

Add the element UX Toolbox | Popover to your page.

Parameters

NameTypeDescriptionDefaultMandatory
Element IDTextID of the element to targetNoneYes
TitleTextPopover titleNoneYes
ContentTextPopover contentNoneYes
PlacementChoicePopover position relative to the elementtopNo
Background ColorColor-#484554No
Text ColorColor-#FFFFFFNo

Component - Popconfirm

Setup

Add the element UX Toolbox | Popconfirm to your page and call the method render UXToolbox | Popconfirm.

Action Parameters

NameTypeDescriptionDefaultMandatory
TitleTextPopover titleNoneYes
ContentTextPopover contentNoneYes
Cancel TextTextCancel button textCancelNo
Confirm TextTextConfirm button textNoneYes
Confirm Button ColorColor-#655CD5No
Cancel Button ColorColor-#484554No

Events

  • Confirm: triggered when confirm button is clicked
  • Cancel: triggered when cancel button is clicked

Component - Animal avatar

Setup

Add the element UX Toolbox | Animal Avatar to your page.

Parameters

NameTypeDescriptionDefaultMandatory
SeedTextSeed string (e.g. User ID)NoneYes
SizeNumberAvatar size in pixels24No
Round AvatarChoiceUse a round or a rectangle shapeYesNo
BlackoutChoiceShow a blackout for right side of an avatarYesNo
Avatar ColorsTextColor strings separated by a new lineNoneNo
Background ColorsTextColor strings separated by a new lineNoneNo

Do you need any help? Feel free to reach out