NativeButton

A customizable button block for Nativeblocks.

@NativeBlock(
    name = "Native Button",
    keyType = "NATIVE_BUTTON",
    description = "Nativeblocks Button block",
    version = 2
)
@Composable
fun NativeButton

NativeButton is a flexible and configurable button block that integrates with the Nativeblocks ecosystem.
It supports features like custom icons, font styles, colors, padding, shadows, and more.

Features:

Customizable alignment, font, colors, padding, and shadows.
Support for both leading and trailing icons.
Dynamic properties configured via Nativeblocks Studio.
Handles enabled and disabled states.
Triggers an action when clicked.

Example:

NativeButton(
    text = "Click Me",
    onClick = { println("Button clicked") }
)

Datas

text

The text displayed on the button.

@NativeBlockData(description = "The primary text content of the button.")
val text: String

enable

Determines whether the button is enabled.

@NativeBlockData(
    description = "Whether the button is enabled or not.",
    defaultValue = "true"
) enable: Boolean = true,

Properties

width

The width of the button.

@NativeBlockProp(
    valuePickerGroup = NativeBlockValuePickerPosition("Size"),
    valuePicker = NativeBlockValuePicker.COMBOBOX_INPUT,
    valuePickerOptions = [
        NativeBlockValuePickerOption("match", "Match parent"),
        NativeBlockValuePickerOption("wrap", "Wrap content")
    ],
    description = "The width of the button (e.g., 'match' or 'wrap').",
    defaultValue = "wrap"
) width: String = "wrap"

height

The height of the button.

@NativeBlockProp(
    valuePickerGroup = NativeBlockValuePickerPosition("Size"),
    valuePicker = NativeBlockValuePicker.COMBOBOX_INPUT,
    valuePickerOptions = [
        NativeBlockValuePickerOption("match", "Match parent"),
        NativeBlockValuePickerOption("wrap", "Wrap content")
    ],
    description = "The height of the button (e.g., 'match' or 'wrap').",
    defaultValue = "wrap"
) height: String = "wrap"

contentColor

The color of the button's text when enabled.

@NativeBlockProp(
    valuePickerGroup = NativeBlockValuePickerPosition("Content color"),
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    description = "The color of the button's text or content.",
    defaultValue = "#FFFFFFFF"
) contentColor: Color = Color.White

disabledContentColor

The color of the button's text when disabled.

@NativeBlockProp(
    valuePickerGroup = NativeBlockValuePickerPosition("Content color"),
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    description = "The color of the button's content when it is disabled.",
    defaultValue = "#FFFFFFB2"
) disabledContentColor: Color = Color(0xFFFFFFB2)

backgroundColor

The background color of the button when enabled.

@NativeBlockProp(
    valuePickerGroup = NativeBlockValuePickerPosition("Background color"),
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    description = "The background color of the button.",
    defaultValue = "#FF212121"
) backgroundColor: Color = Color(0xFF212121)

disableBackgroundColor

The background color of the button when disabled.

@NativeBlockProp(
    valuePickerGroup = NativeBlockValuePickerPosition("Background color"),
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    description = "The background color when the button is disabled.",
    defaultValue = "#212121B2"
) disableBackgroundColor: Color = Color(0x212121B2)

borderColor

The border color of the button when enabled.

@NativeBlockProp(
    valuePickerGroup = NativeBlockValuePickerPosition("Border color"),
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    description = "The border color of the button.",
    defaultValue = "#FF212121"
) borderColor: Color = Color(0xFF212121)

disableBorderColor

The border color of the button when disabled.

@NativeBlockProp(
    valuePickerGroup = NativeBlockValuePickerPosition("Border color"),
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    description = "The border color when the button is disabled.",
    defaultValue = "#212121B2"
) disableBorderColor: Color = Color(0x212121B2)

padding

Defines padding for the button content.

paddingStart: Padding on the start (left) side in DP. Default is 4.0.
paddingTop: Padding on the top side in DP. Default is 4.0.
paddingEnd: Padding on the end (right) side in DP. Default is 4.0.
paddingBottom: Padding on the bottom side in DP. Default is 4.0.

fontFamily

The font family of the button text.

@NativeBlockProp(
    description = "The font family for the button text.",
    valuePickerGroup = NativeBlockValuePickerPosition("Font"),
    defaultValue = "default"
)
val fontFamily: String = "default"

textAlign

The alignment of the button text (e.g., 'start', 'center').

@NativeBlockProp(
    valuePickerGroup = NativeBlockValuePickerPosition("Font"),
    valuePicker = NativeBlockValuePicker.DROPDOWN,
    valuePickerOptions = [
        NativeBlockValuePickerOption("start", "start"),
        NativeBlockValuePickerOption("center", "center"),
        NativeBlockValuePickerOption("end", "end"),
        NativeBlockValuePickerOption("justify", "justify")
    ],
    description = "The alignment of the button text (e.g., 'start', 'center').",
    defaultValue = "start"
) textAlign: TextAlign = TextAlign.Start

fontWeight

The font weight of the button text.

@NativeBlockProp(
    valuePickerGroup = NativeBlockValuePickerPosition("Font"),
    valuePicker = NativeBlockValuePicker.DROPDOWN,
    valuePickerOptions = [
        NativeBlockValuePickerOption("thin", "thin"),
        NativeBlockValuePickerOption("extraLight", "extraLight"),
        NativeBlockValuePickerOption("light", "light"),
        NativeBlockValuePickerOption("normal", "normal"),
        NativeBlockValuePickerOption("medium", "medium"),
        NativeBlockValuePickerOption("semiBold", "semiBold"),
        NativeBlockValuePickerOption("bold", "bold"),
        NativeBlockValuePickerOption("extraBold", "extraBold"),
        NativeBlockValuePickerOption("black", "black")
    ],
    description = "The font weight for the button text (e.g., 'normal', 'bold').",
    defaultValue = "normal"
) fontWeight: FontWeight = FontWeight.Normal,
val fontWeight: String = "normal"

Slots

onLeadingIcon

An optional leading icon for the button.

@NativeBlockSlot(description = "Slot for adding a leading icon to the button.")
val onLeadingIcon: (@Composable (index: BlockIndex) -> Unit)? = null

onTrailingIcon

An optional trailing icon for the button.

@NativeBlockSlot(description = "Slot for adding a trailing icon to the button.")
val onTrailingIcon: (@Composable (index: BlockIndex) -> Unit)? = null

Events

onClick

The action triggered when the button is clicked.

@NativeBlockEvent(description = "The action triggered when the button is clicked.")
val onClick: () -> Unit