IN THIS ARTICLE

    IN THIS ARTICLE

      Button

      This comprehensive guide will cover everything that needs to be known about the Button element in Mokkup.

      When to Use?

      A button element helps users understand data with the template  features and functions. Users can click or tap buttons to take specific actions.

      A button is used when:

      • Metric Switching: Enable users to switch between different metrics or data sets using buttons, providing quicker access compared to dropdown menus.
      • Metric/Charge Toggling: Implement buttons to toggle between metrics and charges, allowing users to easily switch their focus between different aspects of data.
      • View Filters: Utilize buttons for selecting various time-based views, like monthly, daily, or weekly, enhancing user control over data visualization.
      • Navigation: Incorporate buttons for navigating to specific pages or external links, streamlining user movement within the dashboard and to related resources.
      • Dropdown Alternatives: Replace dropdown menus with buttons for better usability, giving users direct options without the need for dropdown interaction.

      How to Create?

      There are two ways to use Image in the Mokkup dashboard:

      Create New:

      • When creating a project from scratch, simply click on the button element in the sidebar to add it or drag and drop it onto the canvas.
      • Can resize it and edit it from the customize element menu.

      Use Template:

      • When using a template with the button element, select the element to resize and open the customize element menu. 

      How to Customize?

      1. List:

      • Add, remove or re-order buttons from this section. Multiple buttons can be added from here.
      • Change the title of each button (and its text theme) by clicking on the "Title" bar.

      2. Properties:

      • Change the orientation of the button according to your preferences from vertical to horizontal through the “Orientation” tab
      • Activate or deactivate the "Fill" tab by toggling it on or off as needed. 

      3. Theme & Customizations

      Click the 'Theme & Customization' icon in the floating toolbar on top of the element (or open it by scrolling down the left side menu) to style this button on its own, without changing the rest of the dashboard.

      • Element Color Theme

      Pre-fills this button's fill and label text from the project's Primary, Secondary, and Tertiary palette. Then lets you edit any swatch or hex code to override the colors for this button alone. There's no theme gallery at this level; changes apply immediately, and 'Reset to Default' brings it back in line with the project theme. See Mokkup Themes for more.

      • Element Text Theme

      Style the label text of each button, with its own Font, Size, Style (Bold/Italic/Underline), Alignment, and Color, plus 'Reset to Default'. See Text Themes for the full list.

      • Element Effects Theme

      Rounded Corners, Padding (set independently for the inner spacing's Left/Top/Right/Bottom sides, plus an overall outer padding), Element Color, Drop Shadow, and Stroke. See Effects Theme for details.

      Note: Whichever change you make most recently is the one that sticks. For example, if you customize an element's effects and then apply a new project-level Effects Theme, the project theme overrides that element's custom styling, and the reverse holds true too.

      This was a complete guide to using the “Button” element on Mokkup. If you have further questions, please ask our Chatbot or contact support.

      Similar articles