Outlined Button

Overview

The OutlinedButton component is designed for initiating actions within applications, characterized by its clear border and less prominent appearance compared to solid buttons. This makes it ideal for secondary actions, providing users with a visually appealing and accessible way to interact with the application. The following documentation details the customization options through data, style, and action properties for the OutlinedButton component.

Sample JSON

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

outlinedButton.json

{
    "type": "outlinedButton",
    "data": {
        "child": {
            "type": "row",
            "data": {
                "children": [
                    {
                        "type": "spacer",
                        "data": {
                            "minLength": 10

                        }
                    },
                    {
                        "type": "text",
                        "data": {
                            "text": "Action"
                        },
                        "style": {
                            "fontSize": 20,
                            "fontColor": "ff0000",
                            "fontWeight": "semiBold"
                        }
                    },
                    {
                        "type": "spacer",
                        "data": {
                            "minLength": 10

                        }
                    },
                ]
            }
        }
    },
    "style": {
        "height": 60,
        "width": 200,
        "backgroundColor": "ffffff",
        "backgroundColorDark": "000000",
        "borderColor": "ff0000",
        "borderColorDark": "ff0000",
        "borderWidth": 2,
        "cornerRadius": 30,
        "padding": {
        },
        "contentPadding": {
            "top": 12,
            "right": 20,
            "bottom": 12,
            "left": 20
        }
    },
    "action": {
        "type": "push",
        "payload": {
            "message": "Outlined Button",
            "description": "This is an example of outlined button",
            "data": {
                "children": []
            }
        }
    }
}

This JSON structure demonstrates configuring an OutlinedButton with text and spacers, along with specific style attributes such as dimensions, colors, border properties, and padding. It is also configured to perform a navigation action when pressed.

Data Properties

The data properties specify the content and structure within the OutlinedButton 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 OutlinedButton. This can be a single component or a layout with multiple components.

Style Properties (Optional)

Customize the appearance of the OutlinedButton with the following optional style properties:

Property	Type	Platform	Required	Description
height	Float	android, iOS	false	Specifies the button's height.
width	Float	android, iOS	false	Defines the button's width.
cornerRadius	Float	android, iOS	false	Sets the radius for rounded corners.
backgroundColor	String	android, iOS	false	Determines the button's background color in light mode.
backgroundColorDark	String	android, iOS	false	Sets the button's background color in dark mode.
borderColor	String	android, iOS	false	Specifies the color of the button's border.
borderColorDark	String	android, iOS	false	Sets the border color in dark mode.
borderWidth	Float	android, iOS	false	Defines the width of the border.
contentPadding	JSON	android, iOS	false	Adjusts padding around the button's content for internal spacing.

Style Properties (Optional)

The style properties for the OutlinedButton 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
• Description: Sets the button's height in logical pixels.

width

• Type: Float
• Description: Defines the button's width in logical pixels.

cornerRadius

• Type: Float
• Description: Specifies the radius for the button's corners, enabling rounded corners.

backgroundColor

• Type: String
• Description: Determines the button's background color in light mode, provided as a hexadecimal code.

backgroundColorDark

• Type: String
• Description: Sets the button's background color in dark mode, ensuring visual consistency across themes.

borderColor

• Type: String
• Description: Specifies the color of the button's border in light mode, enhancing its outlined appearance.

borderColorDark

• Type: String
• Description: Defines the border color in dark mode, maintaining visual integrity in different themes.

borderWidth

• Type: Float
• Description: Determines the width of the border, contributing to the button's outlined effect.

contentPadding

• Type: JSON
• Description: Adjusts the padding around the button's content, optimizing the internal spacing and layout.

By leveraging these properties, developers can craft a customized OutlinedButton that not only aligns with the aesthetic requirements of their application but also encapsulates a range of functionalities to enhance user engagement and interaction.

Action Properties

Action properties define the behavior of the OutlinedButton 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.

type

• Type: String (required)
• Description: Determines the type of action that will be triggered upon interacting with the OutlinedButton. 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 OutlinedButton.

info

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

Customizing the OutlinedButton

By utilizing these data, style, and action properties, developers can tailor the OutlinedButton's appearance and behavior to match their application's design language and functional requirements. This customization enhances the user experience by providing clear, accessible actions within the UI, ensuring that the application remains intuitive and engaging for all users.