Text Button

Overview

The TextButton component is a user interface element designed for initiating actions when tapped. It combines visual and interactive aspects, allowing users to interact with your application in a straightforward and accessible manner. This document details the data, style, and action properties you can utilize to tailor the TextButton component to fit your application's needs.

Sample JSON

Below is an example JSON object that demonstrates how to configure a TextButton component with various properties:

textButton.json

{
  "type": "textButton",
  "data": {
    "label": "Hello World"
  },
  "style": {
    "height": 60,
    "width": 200,
    "foregroundColor": "0000ff",
    "foregroundColorDark": "ff0000",
    "fontWeight": "bold",
    "fontSize": 24,
    "padding": {}
  },
  "action": {
    "type": "push",
    "payload": {
      "message": "Text Button",
      "description": "This is an example of text button",
      "data": {
        "children": []
      }
    }
  }
}

In this configuration, the TextButton component is defined with a label "Hello World" and styled with specific dimensions, colors, font properties, and padding. It is also configured to perform a navigation action ("push") with a given payload when tapped.

Data Properties

The data properties specify the content of the TextButton component. The following table outlines the available data property:

Property	Type	Required	Description
label	String	true	The label to be displayed.

label

• Type: String (required)
• Description: The text that will be displayed on the TextButton component.

Style Properties (Optional)

Style properties allow you to customize the appearance of the TextButton component. These properties are optional, and default values will be used if they are not specified. The table below lists the available style properties:

Here's the updated table with the platform column inserted between the type and required columns:

Property	Type	Platform	Required	Description
height	Float	android, iOS	false	The height of the component.
width	Float	android, iOS	false	The width of the component.
fontSize	Float	android, iOS	false	The size of the font in logical pixels.
fontWeight	String	android, iOS	false	The thickness of the font (e.g., "bold").
foregroundColor	String	android, iOS	false	The color of the textButton.
foregroundColorDark	String	android, iOS	false	The color of the textButton in dark mode.
padding	JSON	android, iOS	false	The padding around the textButton component.

Let's detail the style properties for the TextButton component, offering a comprehensive guide on how to customize its appearance.

Style Properties (Optional)

The style properties enable customization of the TextButton's appearance to align with your application's design language. While these properties are optional, specifying them allows for a more tailored user experience. Below are explanations for each style property available for the TextButton component:

height

• Type: Float (optional)
• Description: Specifies the height of the TextButton component in logical pixels. This property determines the vertical size of the button.

width

• Type: Float (optional)
• Description: Defines the width of the TextButton component in logical pixels. This property sets the horizontal size of the button, allowing for precise layout control.

fontSize

• Type: Float (optional)
• Description: Sets the size of the font used for the button's label in logical pixels. This property impacts the legibility of the label, with larger values increasing the text size.

fontWeight

• Type: String (optional)
• Description: Controls the thickness of the font used for the label. Available options typically include "light," "regular," "medium," "semibold," "bold," etc. This property affects the visual weight and emphasis of the label text.

foregroundColor

• Type: String (optional)
• Description: Determines the color of the TextButton's label. The value should be a hexadecimal color code (e.g., "0000ff" for blue), defining the label color in light mode.

foregroundColorDark

• Type: String (optional)
• Description: Sets the color of the TextButton's label when the application is in dark mode. Like foregroundColor, this should be a hexadecimal color code (e.g., "ff0000" for red), providing a way to maintain visual consistency across different themes.

padding

• Type: JSON (optional)
• Description: Specifies the padding inside the TextButton component, creating space around the label. This property is defined as a JSON object with optional top, bottom, left, and right sub-properties, each representing the padding in logical pixels on their respective sides. Providing padding can enhance the touch target size and visual appearance of the button.

note

Utilizing these style properties allows developers to fine-tune the TextButton's appearance, ensuring it fits seamlessly within the application's design and provides an optimal user experience.

Action Properties

Action properties define the behavior of the TextButton component when it is interacted with. These properties determine what action will be taken, such as navigating to a different view or displaying a modal dialog. The table below provides details on the available action properties:

Property	Type	Required	Description
type	String	true	The type of action to be performed (push, sheet, or dialog).
payload	JSON	true	The payload to be passed to the action for the destination view.
message	String	false	The message to be passed to the destination. (Used for the heading of dialog)
description	String	false	The description to be passed to the destination. (Used for subheading of dialog)

type

• Type: String (required)
• Description: Specifies the type of action that will be triggered. Valid values include "push" for navigation, "sheet" for presenting a bottom sheet, and "dialog" for showing a dialog box.

payload

• Type: JSON (required)
• Description: Contains data that will be passed to the destination view when the action is executed. This could include anything from navigation parameters to data required for the destination component to render appropriately.

message and description

• Type: String (optional)
• Description: These properties are used to pass textual information to the destination, typically used with the "dialog" action type to provide a heading (message) and subheading (description) for the dialog.

info

Customizing the TextButton component through these properties allows for a flexible and dynamic user interface, capable of fitting a wide range of application designs and functionalities.