Elevated Button

Overview

The ElevatedButton component is a user interface element that stands out due to its shadow, giving it a sense of elevation above the interface. This component is designed for initiating actions when pressed, providing both a visual and interactive distinction. This document covers the data, style, and action properties that can be used to customize the ElevatedButton component to suit your application's needs.

Sample JSON

Here's an example JSON object showing how to configure an ElevatedButton component with various properties:

elevatedButton.json
{
  "type": "elevatedButton",
  "data": {
    "child": {
      "type": "row",
      "data": {
        "children": [
          {
            "type": "spacer",
            "data": {
              "minLength": 10
            }
          },
          {
            "type": "text",
            "data": {
              "text": "Action"
            },
            "style": {
              "fontSize": 20,
              "fontColor": "ffffff"
            }
          },
          {
            "type": "spacer",
            "data": {
              "minLength": 10
            }
          }
        ]
      }
    }
  },
  "style": {
    "height": 60,
    "width": 200,
    "backgroundColor": "0000ff",
    "backgroundColorDark": "ff0000",
    "cornerRadius": 30,
    "padding": {},
    "contentPadding": {
      "top": 10,
      "right": 20,
      "bottom": 10,
      "left": 20
    }
  },
  "action": {
    "type": "push",
    "payload": {
      "message": "Elevated Button",
      "description": "This is an exaple of elevated button",
      "data": {
        "children": []
      }
    }
  }
}

This configuration defines an ElevatedButton with a row containing text and spacers as its child. The button is styled with specific dimensions, background colors for light and dark modes, corner radius, and padding. It is configured to perform a navigation action ("push") with a given payload when pressed.

Data Properties

The data properties specify the content and structure within the ElevatedButton component. Below is the available data property:

Property	Type	Required	Description
child	JSON	true	Defines the child component(s) displayed inside the button, such as text or icons.

`child`

Type: JSON (required)
Description: Contains the child component(s) to be rendered inside the ElevatedButton. This can be a single component or a layout with multiple components.

Style Properties (Optional)

Style properties allow for the customization of the ElevatedButton's appearance. These properties are optional, with default values being used if not specified. The table below lists the style properties for the ElevatedButton component:

Property	Type	Platform	Required	Description
height	Float	android, iOS	false	The height of the button in logical pixels.
width	Float	android, iOS	false	The width of the button in logical pixels.
cornerRadius	Float	android, iOS	false	The radius of the button's corners, providing a rounded appearance.
backgroundColor	String	android, iOS	false	The button's background color in light mode.
backgroundColorDark	String	android, iOS	false	The button's background color in dark mode.
shadowColor	String	iOS	false	The color of the shadow cast by the button.
shadowColorDark	String	iOS	false	The color of the shadow cast by the button in dark mode.
shadowRadius	Float	iOS	false	The blur radius of the shadow under the button.
padding	JSON	android, iOS	false	Padding around the button's outer edge.
contentPadding	JSON	android, iOS	false	Padding around the button's content, affecting the inner spacing.

Style Properties (Optional)

The style properties for the ElevatedButton component allow you to customize its visual presentation to align with your application's design system. Here are the explanations for each of the style properties you can utilize:

`height`

Type: Float (optional)
Description: Sets the vertical size of the ElevatedButton in logical pixels. This property allows you to specify how tall the button should be, affecting its visibility and touch area.

`width`

Type: Float (optional)
Description: Determines the horizontal size of the ElevatedButton in logical pixels. This width adjustment can help the button fit better within different layouts and screen sizes.

`cornerRadius`

Type: Float (optional)
Description: Defines the radius of the ElevatedButton's corners in logical pixels. A higher value results in more rounded corners, contributing to the button's overall style and feel.

`backgroundColor`

Type: String (optional)
Description: Specifies the background color of the ElevatedButton in light mode. This color is typically provided as a hexadecimal code (e.g., "0000ff" for blue), influencing the button's appearance under standard lighting conditions.

`backgroundColorDark`

Type: String (optional)
Description: Sets the background color of the ElevatedButton in dark mode. This allows for visual consistency across different themes, ensuring that the button remains visually appealing in both light and dark modes.

`shadowColor`

Type: String (optional)
Description: Sets the color of the shadow cast by the button, which can enhance the visual prominence of the tile.

`shadowColorDark`

Type: String (optional)
Description: Specifies the shadow color for the button in dark mode, maintaining aesthetic consistency across light and dark themes.

`shadowRadius`

Type: Float (optional)
Description: The blur radius for the shadow beneath the button, affecting how diffused or sharp the shadow appears.

`padding`

Type: JSON (optional)
Description: Controls the padding around the outer edge of the ElevatedButton. This JSON object can include top, right, bottom, and left values, adjusting the spacing between the button's border and its surroundings.

`contentPadding`

Type: JSON (optional)
Description: Adjusts the padding around the content inside the ElevatedButton, such as text or icons. Similar to padding, this property can specify top, right, bottom, and left values to control the spacing within the button, affecting how the inner content is displayed.

Action Properties

Action properties define the behavior of the ElevatedButton when interacted with. These properties determine the action to be taken, such as navigating to another view or displaying a modal dialog. The table below details the available action properties:

Property	Type	Required	Description
type	String	true	The type of action to be performed (e.g., "push", "sheet", or "dialog").
payload	JSON	true	The payload to be passed to the action for the destination view.
message	String	false	A message to be passed to the destination, often used as a dialog heading.
description	String	false	A description to be passed to the destination, often used as a dialog subheading.

Action Properties

The action properties of the ElevatedButton component define what happens when the button is pressed, allowing for a wide range of interactions and behaviors. Here's a detailed look at each action property:

`type`

Type: String (required)
Description: Determines the type of action that will be triggered upon interacting with the ElevatedButton. Common values include "push" for navigating to a new screen, "sheet" for presenting a bottom sheet, and "dialog" for showing a dialog box.

`payload`

Type: JSON (required)
Description: Contains the data or parameters to be passed along with the action. This could include navigation details, information to be displayed on the next screen, or any other data relevant to the action's execution.

`message`

Type: String (optional)
Description: Provides a message to be displayed as part of the action, often used as a title or heading when opening a dialog. This text helps convey the purpose of the interaction to the user.

`description`

Type: String (optional)
Description: Offers additional context or information about the action, typically used as a subheading or detailed explanation in a dialog. This property can help users understand the implications of their interaction with the ElevatedButton.

info

Customizing the ElevatedButton through these properties enables a versatile and visually distinctive user interface component that enhances the user experience by providing clear and actionable interactions.

Elevated Button

Overview​

Sample JSON​

Data Properties​

child​

Style Properties (Optional)​

Style Properties (Optional)​

height​

width​

cornerRadius​

backgroundColor​

backgroundColorDark​

shadowColor​

shadowColorDark​

shadowRadius​

padding​

contentPadding​

Action Properties​

Action Properties​

type​

payload​

message​

description​

Overview

Sample JSON

Data Properties

`child`

Style Properties (Optional)

Style Properties (Optional)

`height`

`width`

`cornerRadius`

`backgroundColor`

`backgroundColorDark`

`shadowColor`

`shadowColorDark`

`shadowRadius`

`padding`

`contentPadding`

Action Properties

Action Properties

`type`

`payload`

`message`

`description`