REA MultiButton

REA Multi Button is a widget that offers a pair of buttons that can be designed with or without a fancy connector as shown below in two images.

Content

This section has three tabs: Primary, Connector, and Secondary.

The settings for Primary Button and Secondary Button are the same. Following are their settings:

Text - Allows the user to add the text for the button.
Link - Allows the user to add the link for the button.
Icon - Allows the user to add an icon to the button content.
Icon Position - Allows the user to choose the position of the icon, whether it should be before or after the button text. This setting is available if the Icon setting has been set to an icon.
Icon Spacing - Allows the user to set the icon spacing between the icon and the button text. This setting is available if the Icon setting has been set to an icon.

The settings for the Connector are as follows:

Hide Connector? - Allows the user to hide or show the connector. If this setting is set to yes then the following connector settings will not be available.
Connector Type - Allows the user to choose the type of connector, whether it should be Text or Icon.
Text - Allows the user to add the text for the connector, if the Connector Type is set to Text.
Icon - Allows the user to add the icon for the connector, if the Connector Type is set to Icon.

The following setting is for the entire button widget.

Layout - This is a responsive control that allows the user to set the layout of REA Multi Button. Available choices are Stack and Queue.

This setting is for the common style of both primary and secondary buttons.

Padding - This is a responsive control that allows the user to set the padding for both buttons.
Spacing Between Buttons - This is a responsive control that allows the user to set the gap between the two buttons.
Typography - allows the user to set the typography settings for both buttons.
Box Shadow - allows the user to set the box-shadow settings for both buttons.
Alignment - This is a responsive control that allows the user to choose the alignment of the pair of buttons.

The Primary Button and Secondary Button are two different sections with the same settings.

Padding - This is a responsive control that allows the user to set the padding of the respective button.
Border - Allows the user to select the border type.
Border Width - This is a responsive control that allows the user to set the border width of the respective button. This setting is available if the Border is not set to None.
Border Color - Allows the user to set the border color of the respective button. This setting is available if the Border is not set to None.
Border Radius - This is a responsive control that allows the user to set the border-radius value of the respective button.
Box Shadow - allows the user to set the box-shadow settings of the respective button.

Normal State

Text Color - Allows the user to set the color of the respective button for the normal state.
Background Color - Allows the user to set the background color of the respective button for the hover state.

Hover State

Text Color - Allows the user to set the color of the respective button for the hover state.
Background Color - Allows the user to set the background color of the respective button for the hover state.
Border Color - Allows the user to set the border color of the respective button for the hover state.

Following settings will only be available if the Hide Connector setting is not set to “yes” in Content Tab -> Multi Buttons section -> Connector Tab.

Text Color - Allows the user to set the text color of the Connector.
Background Color - Allows the user to set the background color of the Connector.
Typography - allows the user to set the typography settings of the Connector.
Box Shadow - allows the user to set the box-shadow settings of the Connector.

Last updated 3 years ago