LogoLogo
FeaturesHelp & ResourcesShowcasePricingLogin
Learn Section
Learn Section
  • Introduction
  • Getting Started
    • Finding your way around
    • Core concepts
      • Data Binding
      • Data Insertion
      • Dynamic Visibility
    • Creating and managing projects
      • Creating a Project
      • Saving a Project
      • Opening a Project
      • Version History
    • Templates
  • Components
    • Overview
    • Layout & Positioning
    • Charts
      • Line Chart
      • Column Chart
      • Bar Chart
      • Pie Chart
      • Combination Chart
      • Area Chart
      • Spline Chart
      • Step Chart
    • DataViz
      • Gauge
      • Word Cloud
      • Chord Diagram
      • Sankey Diagram
      • Schedule (Gantt)
      • Metric Tile
      • Progress Bar
      • Trend Icon
      • Mapbox
      • Loading Animation
    • Tables
      • Scorecard
      • Data Table
    • Controls
      • Push Button
      • Dropdown
      • Multi Select Dropdown
      • Listbox
      • Label Based Menu
      • Checkbox
      • Radio Button
      • Slider
      • Value Input
      • Print Button
      • URL Button
      • Screenshot
      • Hotspot
      • Date Picker
      • Toggle Switch
      • Scenario
    • Text
      • Text Label
      • Text Input
      • Text Area
    • Shapes
      • Rectangle
      • Ellipse
      • Line
    • Media
      • Image
      • Icon
    • Containers
      • Container
      • Web View
      • Repeat Container
      • Row Layout
      • Column Layout
  • Functions
    • Overview
    • Data Mover
    • External Parameters
    • Export to Excel
    • Export to PDF
    • Timer
    • Tableau Parameters
    • Browser Info
    • TextJoin
    • Unique List
  • Connections
    • Overview
    • Excel One Drive
      • Excel One Drive Read
      • Excel One Drive Writeback
    • Google Sheets
      • Google Sheets Read
      • Google Sheets Writeback
    • Ninox Connections
    • Smartsheets
    • CSV Connector
    • SAP Webi Connector
    • XDC Connections
    • Database Connections
    • Zapier Trigger
  • Spreadsheet
    • Overview
    • Spreadsheet functionality
    • Supported Spreadsheet Functions
    • Spreadsheet performance
  • Best practices for the Squirrel spreadsheet
  • Publishing & Sharing
    • Overview
    • Project Settings
    • Publishing to Squirrel Cloud
    • Publishing Locally
    • Using the Project Manager
    • Adding projects to PowerPoint
    • Adding projects to Tableau
    • Progressive Web Apps (PWA)
  • SETTINGS
    • Image Library
    • Custom Fonts
  • Account Management
    • Manage your account Profile
    • Understanding your Squirrel plan usage
    • Changing your Plan
    • Billing
    • How do I delete my account?
  • Frequent Questions
    • What data do you keep and for how long?
  • How-Tos
    • Overview
    • Add-ons
      • Add-on Documentation
      • Window Size – Add responsive behavior to your components
      • Window Size - Getting responsive behavior in the canvas
    • Adding your own Google Fonts
    • Chart title and Checkbox label text case formatting
    • Deleting functions and connections
    • Find & Replace Fonts
    • Getting a Mapbox API access token
    • Renaming a component, function or connection
    • Seeing Data from a Connector at Design time
    • Troubleshooting Projects in the Console
    • Using colors and color values
  • Tutorials
    • Create a temperature conversion app
    • Create a revenue growth app from an existing spreadsheet
    • Whack-A-Squirrel Game
    • Filtered Rows Insertion: Building a Filtered Selection
Powered by GitBook
LogoLogo

Explore

  • Home
  • Features
  • Pricing
  • Download Squirrel

Help

  • Learn
  • Community
  • Support
  • FAQ's

Updates

  • Blog
  • Events
  • Release Notes

Company

  • Contact Us
  • Privacy Policy
  • Terms of Use

Copyright © 2019 - 2024 InfoSol Ltd. All rights reserved.

On this page
  • Push Button Properties
  • DATA INSERTION
  • BUTTON STYLING
  • INTERACTIVITY

Was this helpful?

  1. Components
  2. Controls

Push Button

This article describes the Push Button component and its properties.

PreviousControlsNextDropdown

Last updated 3 months ago

Was this helpful?

Who can use this feature?

All Squirrel365 plans include the Push Button component.

For more details, see our .

Squirrel 1.12 introduced a “Quick Set-up” tab on many property panels. The properties described on this page are available on the “All Properties” tab of the property panel. For more details on “Quick Set-Up” properties see

The Push Button is used to capture mouse clicks from the user. Use it to trigger actions such as hiding or showing other components, moving data, making a selection, and so on.

Select Push Button from the Controls category of the component library. Move the mouse over the canvas and click to add a push button to your project:

Push Button Properties


DATA INSERTION


BUTTON STYLING

The appearance of the button can be altered to suit a theme or particular style by using the BUTTON STYLING properties:

DEFAULT TEXT

The DEFAULT TEXT property is checked by default. Uncheck the checkbox adjacent to the DEFAULT TEXT section title to hide the default push button label.

  • Button Text – This property contains the text that will be shown in the push button label.

  • Font – Choose a font style from the dropdown list.

  • Size – Change the font size of the push button label.

  • B I U – Use these toggle buttons (bold, italic, underline) to change the format of the button label. When any of these is toggled on, the button is blue:

  • Default Text Color – The button label will be shown in the colour that matches the value entered in the property field.

    • Opacity – This determines the transparency of the button label.

FORMAT

These formatting properties apply to the default push button label.

  • Text alignment – Choose to align the button label to the left, right, or centre. The current selection is indicated by the blue button:

  • Content alignment – Choose to vertically align the button label to the top, centre or bottom of the push button component. The current selection is indicated by the blue button:

  • Padding – This property defines the space between the push button label and the push button border.

    • Individual Padding - selected this property to apply different amounts of padding to each of the component's edges. Each of these individual inputs can be manually edited or bound to the spreadsheet.

Padding will be applied following the properties set for Text alignment and Content alignment e.g. if the label is left justified and aligned to the top, then the padding will be applied between the left and top borders of the push button and its label.

DEFAULT STYLE

In this section, you can set the color, border, and drop shadow properties of the button.

  • Fill – This property sets the background color of the push button. Uncheck if a fill color is not required.

    • Opacity – This changes the opacity of the push button.

  • Border – This property sets the border color of the push button.

    • Weight – This changes the line thickness of the push button border.

      • Individual Weight - selected this property to apply different widths to each of the component's borders. Each of these individual inputs can be manually edited or bound to the spreadsheet.

    • Line style – Select a push button border line style. The options are Solid and Dashed. (see image)

  • Corners – This property determines the corner radius of the push button border. Use the slider to amend this property or type a numerical value into the property field.

    • Individual Corners - selected this property to apply different radii to each of the component's corners. Each of these individual inputs can be manually edited or bound to the spreadsheet.

  • Effects – Choose between None and Drop Shadow from the dropdown box. If Drop Shadow is selected, further drop shadow properties are shown.

    • Color - This property sets the color of the shadow

      • Opacity - this property changes the opacity of the shadow

    • X Offset - This property adjusts the X offset of the shadow, moving it left or right depending on a positive or negative value

    • Y Offset - This property adjusts the Yoffset of the shadow, moving it up or down depending on a positive or negative value

    • Blur - This property adjusts the blur percentage of the shadow

HOVER STATE

The HOVER STATE property is checked by default. Uncheck this if you wish to disable the hover state properties.

  • Hover Text Color – As the mouse moves over the button, the button label text will change to the color value entered in this property field.

    • Opacity – As the mouse moves over the button, the opacity of the button label text will change to the value entered in this property field.

  • Hover Fill – As the mouse moves over the button, the button background color will change to the color value entered in this property field.

    • Opacity – As the mouse moves over the button, the opacity of the button will change to the value entered in this property field.

PRESSED STATE

The PRESSED STATE property is checked by default. Uncheck this if you wish to disable the pressed state properties.

  • Pressed Text Color – As the button is clicked, its label text will change to the color value entered in this property field.

    • Opacity – As the button is clicked, the opacity of its label text will change to the value entered in this property field.

  • Hover Fill – As the button is clicked, its background color will change to the color value entered in this property field.

    • Opacity – As the button is clicked, its opacity will change to the value entered in this property field.


INTERACTIVITY

It is possible to disable the push button:

The Push Button properties consist of DATA INSERTION, BUTTON STYLING, INTERACTIVITY, and DYNAMIC VISIBILITY drawers. This guide will describe the data insertion, button styling, and interactivity properties only; the dynamic visibility properties are generic to each component and a separate guide and tutorial on dynamic visibility can be found .

Data insertion is triggered when the push button is clicked by the user. Data insertion is one of the core concepts within Squirrel, if you aren’t sure what it is, take a look at the tutorial for more information.

the Source Data property to the cell in the spreadsheet that contains the data to be copied, then bind the Destination property to a different cell that the data is to be pasted into.

The INTERACTIVITY property utilizes Conditional Logic. For more information on Conditional Logic and its uses, see .

here
Getting Started: Data Insertion
Bind
this article
pricing comparison matrix
this article
Line styles