Button

Button

In a nutshell

The Button element presents a text label that runs a pre-configured Deluge action when clicked. You can choose a starting preset, edit the displayed label, style the Default and Hover states, and configure the On Click action to build a completely functioning button on your portal page.

1. Overview

The Button element is an atomic primitive that places an interactive, labeled control on a page. It is the standard way to trigger an action in response to a portal user's UI click. The button's display shows a text label, and clicking it runs the Deluge action assigned to the corresponding On click trigger. The typography styling for the label can be configured through the Font section of the Style tab alongside all other visual properties. These styling properties can be individually set for two states of the button:

  1. Default - The button is visible but neither focused nor clicked on
  2. Hover - The button is highlighted as the user moves their pointer over it


Ideal for:

  1. Primary actions such as Submit, Save, and Confirm
  2. Secondary actions such as Cancel and Reset
  3. Navigation triggers that open another portal page or external URL

2. Display properties

Property Description
Element Name The internal identifier for this Button element. This name is auto-generated on placing within the designer and can be customized as required.
Content The text label displayed on the button in the live mode of the portal page.

3. Styling properties

The Button element exposes Default and Hover visual states. Both states can be styled independently, giving full control over how the button communicates interaction to portal users.

  1. Layout *link*
  2. Font *link*
  3. Background *link*
  4. Padding *link*
  5. Margin *link*
  6. Corner Radius *link*
  7. Border *link*
  8. Shadow *link*
  9. Opacity *link*

4. Action properties

The Actions tab controls what happens when a portal user clicks a button and triggers a preconfigured ON CLICK action. The actions can be:

  1. None - No action is performed when the button is clicked. This is the default option for the ON CLICK action.
  1. Navigate To - Navigates the portal user to a destination when the button is clicked. Selecting this option reveals two additional properties.
    1. Page / URL - This is the navigation's destination. You can either enter a publicly accessible URL directly, or select from the list of portal pages available in the dropdown. The dropdown lists all default pages (Sign In, Sign Up, Reset Password, and Create Password) and any custom pages created in the portal.
    2. Open In - This property controls how the destination loads. While Same Window reloads the current browser tab to display the destination portal page or URL, New Window opens it in a separate browser tab.

5. Try it yourself

Add a Button element and try the following:

  1. Change the display content to "Get Started", set a background color, apply Corner radius of Rounded, and set Font weight to Semibold to create a prominent call-to-action.
  2. Style the Default state with a solid fill and the Hover state with a slightly darker shade to provide clear visual feedback on hover.
  3. Use the Outline preset and set the background to transparent with a colored border to create a secondary action that sits alongside a primary Filled button.
  4. Apply Shadow at Elevation 2 to give the button a lifted appearance without a filled background.
  1. Configuring and managing portal pages *link*