NativeButton

A customizable button block for Nativeblocks.

@NativeBlock(
    name = "Native Button",
    keyType = "NATIVE_BUTTON",
    description = "Nativeblocks Button block",
    version = 1
)
@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") }
)

---

Properties

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 = "When true, the button is enabled. Default is true.")
val enable: Boolean = true

width

The width of the button.

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

height

The height of the button.

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

contentColor

The color of the button's text when enabled.

@NativeBlockProp(
    description = "The color of the button's text when enabled.",
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    valuePickerGroup = NativeBlockValuePickerPosition("Content color")
)
val contentColor: String = "#FFFFFFFF"

disabledContentColor

The color of the button's text when disabled.

@NativeBlockProp(
    description = "The color of the button's text when disabled.",
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    valuePickerGroup = NativeBlockValuePickerPosition("Content color")
)
val disabledContentColor: String = "#FFFFFFB2"

backgroundColor

The background color of the button when enabled.

@NativeBlockProp(
    description = "The background color of the button when enabled.",
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    valuePickerGroup = NativeBlockValuePickerPosition("Background color")
)
val backgroundColor: String = "#FF212121"

disableBackgroundColor

The background color of the button when disabled.

@NativeBlockProp(
    description = "The background color of the button when disabled.",
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    valuePickerGroup = NativeBlockValuePickerPosition("Background color")
)
val disableBackgroundColor: String = "#212121B2"

borderColor

The border color of the button when enabled.

@NativeBlockProp(
    description = "The border color of the button when enabled.",
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    valuePickerGroup = NativeBlockValuePickerPosition("Border color")
)
val borderColor: String = "#FF212121"

disableBorderColor

The border color of the button when disabled.

@NativeBlockProp(
    description = "The border color of the button when disabled.",
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    valuePickerGroup = NativeBlockValuePickerPosition("Border color")
)
val disableBorderColor: String = "#212121B2"

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.

fontSize

The font size of the button text.

@NativeBlockProp(
    description = "The font size of the button text.",
    valuePickerGroup = NativeBlockValuePickerPosition("Font")
)
val fontSize: Double = 14.0

fontFamily

The font family of the button text.

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

fontWeight

The font weight of the button text.

@NativeBlockProp(
    description = "The font weight for the button text (e.g., 'normal', 'bold').",
    valuePicker = NativeBlockValuePicker.DROPDOWN,
    valuePickerOptions = [
        NativeBlockValuePickerOption("normal", "Normal"),
        NativeBlockValuePickerOption("bold", "Bold")
    ],
    valuePickerGroup = NativeBlockValuePickerPosition("Font")
)
val fontWeight: String = "normal"

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

onClick

The action triggered when the button is clicked.

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