⌘K

NativeButton

A customizable button block for Nativeblocks.

@NativeBlock(
    name: "Native Button",
    keyType: "NATIVE_BUTTON",
    description: "Nativeblocks Button block",
    version: 1
)
struct NativeButton<Content: View>: View 

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: { print("Button clicked") }
)

Inheritance

View

Properties

text

The text displayed on the button.

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

leadingIcon

An optional leading icon displayed in the button.

@NativeBlockSlot(description: "A view that appears as the leading icon of the button.")
    var leadingIcon: ((BlockIndex) -> Content)? = nil

trailingIcon

An optional trailing icon displayed in the button.

@NativeBlockSlot(description: "A view that appears as the trailing icon of the button.")
    var trailingIcon: ((BlockIndex) -> Content)? = nil

disabled

Determines whether the button is disabled.

@NativeBlockData(description: "When true, the button is disabled and non-interactive.")
    var disabled: Bool = false

alignmentHorizontal

The horizontal alignment of the button content.

@NativeBlockProp(
        description: "Specifies the horizontal alignment of the button content.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("leading", "leading"),
            NativeBlockValuePickerOption("trailing", "trailing"),
            NativeBlockValuePickerOption("center", "center"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Alignment")
    )
    var alignmentHorizontal: String = "center"

alignmentVertical

The vertical alignment of the button content.

@NativeBlockProp(
        description: "Specifies the vertical alignment of the button content.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("top", "top"),
            NativeBlockValuePickerOption("bottom", "bottom"),
            NativeBlockValuePickerOption("center", "center"),
            NativeBlockValuePickerOption("firstTextBaseline", "firstTextBaseline"),
            NativeBlockValuePickerOption("lastTextBaseline", "lastTextBaseline"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Alignment")
    )
    var alignmentVertical: String = "center"

spacing

The spacing between elements inside the button.

@NativeBlockProp(
        description: "The spacing between elements inside the button.",
        valuePickerGroup: NativeBlockValuePickerPosition("Alignment")
    )
    var spacing: CGFloat = 6

fontFamily

The font family of the button text.

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

fontWeight

The weight of the font for the button text.

@NativeBlockProp(
        description: "The weight of the font used for the button text.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("regular", "regular"),
            NativeBlockValuePickerOption("thin", "thin"),
            NativeBlockValuePickerOption("medium", "medium"),
            NativeBlockValuePickerOption("semibold", "semibold"),
            NativeBlockValuePickerOption("bold", "bold"),
            NativeBlockValuePickerOption("heavy", "heavy"),
            NativeBlockValuePickerOption("black", "black"),
            NativeBlockValuePickerOption("light", "light"),
            NativeBlockValuePickerOption("ultralight", "ultralight"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    var fontWeight: String = "regular"

fontDesign

The design of the font for the button text.

@NativeBlockProp(
        description: "Specifies the font design for the button text.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("default", "default"),
            NativeBlockValuePickerOption("monospaced", "monospaced"),
            NativeBlockValuePickerOption("rounded", "rounded"),
            NativeBlockValuePickerOption("serif", "serif"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    var fontDesign: String = "default"

fontSize

The size of the font for the button text.

@NativeBlockProp(
        description: "The font size for the button text.",
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    var fontSize: CGFloat = 16

foregroundColor

The foreground color of the button text.

@NativeBlockProp(
        description: "The color of the text when the button is enabled.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    var foregroundColor: String = "#ffffffff"

disableForegroundColor

The foreground color of the button text when disabled.

@NativeBlockProp(
        description: "The color of the text when the button is disabled.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    var disableForegroundColor: String = "#ff000000"

multilineTextAlignment

The alignment of multi-line text in the button.

@NativeBlockProp(
        description: "Specifies how multi-line text in the button is aligned.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("leading", "leading"),
            NativeBlockValuePickerOption("center", "center"),
            NativeBlockValuePickerOption("trailing", "trailing"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    var multilineTextAlignment: String = "center"

lineLimit

The maximum number of lines for the button text.

@NativeBlockProp(
        description: "The maximum number of lines for the button text.",
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    var lineLimit: Int = 9999

lineSpacing

The spacing between lines of the button text.

@NativeBlockProp(
        description: "The spacing between lines of text in the button.",
        valuePickerGroup: NativeBlockValuePickerPosition("Font")
    )
    var lineSpacing: CGFloat = 0

direction

The layout direction of the button (LTR or RTL).

@NativeBlockProp(
        description: "Specifies the layout direction of the button content.",
        valuePicker: NativeBlockValuePicker.DROPDOWN,
        valuePickerOptions: [
            NativeBlockValuePickerOption("LTR", "LTR"),
            NativeBlockValuePickerOption("RTL", "RTL"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Direction")
    )
    var direction: String = "LTR"

paddingTop

The top padding of the button content.

@NativeBlockProp(
        description: "The top padding of the button content.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding")
    )
    var paddingTop: CGFloat = 8

paddingLeading

The leading (left) padding of the button content.

@NativeBlockProp(
        description: "The leading padding of the button content.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding")
    )
    var paddingLeading: CGFloat = 8

paddingBottom

The bottom padding of the button content.

@NativeBlockProp(
        description: "The bottom padding of the button content.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding")
    )
    var paddingBottom: CGFloat = 8

paddingTrailing

The trailing (right) padding of the button content.

@NativeBlockProp(
        description: "The trailing padding of the button content.",
        valuePickerGroup: NativeBlockValuePickerPosition("Padding")
    )
    var paddingTrailing: CGFloat = 8

frameWidth

The width of the button's frame.

@NativeBlockProp(
        description: "The width of the button frame.",
        valuePicker: NativeBlockValuePicker.COMBOBOX_INPUT,
        valuePickerOptions: [
            NativeBlockValuePickerOption("notSet", "notSet"),
            NativeBlockValuePickerOption("infinity", "infinity"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Size")
    )
    var frameWidth: String = "notSet"

frameHeight

The height of the button's frame.

@NativeBlockProp(
        description: "The height of the button frame.",
        valuePicker: NativeBlockValuePicker.COMBOBOX_INPUT,
        valuePickerOptions: [
            NativeBlockValuePickerOption("notSet", "notSet"),
            NativeBlockValuePickerOption("infinity", "infinity"),
        ],
        valuePickerGroup: NativeBlockValuePickerPosition("Size")
    )
    var frameHeight: String = "notSet"

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")
    )
    var backgroundColor: String = "#ff000ff0"

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")
    )
    var disableBackgroundColor: String = "#c1c1c1"

cornerRadius

The corner radius of the button.

@NativeBlockProp(
        description: "The corner radius of the button.",
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var cornerRadius: CGFloat = 4

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("Background")
    )
    var borderColor: String = "#00000000"

disablBorderColor

The border color of the button when disabled.

@NativeBlockProp(
        description: "The border color of the button when disabled.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var disablBorderColor: String = "#00000000"

borderWidth

The width of the button's border.

@NativeBlockProp(
        description: "The width of the button border.",
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var borderWidth: CGFloat = 0

shadowColor

The shadow color of the button.

@NativeBlockProp(
        description: "The shadow color of the button.",
        valuePicker: NativeBlockValuePicker.COLOR_PICKER,
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var shadowColor: String = "#00000000"

shadowRadius

The blur radius of the button's shadow.

@NativeBlockProp(
        description: "The blur radius of the button shadow.",
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var shadowRadius: CGFloat = 0

shadowX

The horizontal offset of the shadow.

@NativeBlockProp(
        description: "The horizontal offset of the button shadow.",
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var shadowX: CGFloat = 2

shadowY

The vertical offset of the shadow.

@NativeBlockProp(
        description: "The vertical offset of the button shadow.",
        valuePickerGroup: NativeBlockValuePickerPosition("Background")
    )
    var shadowY: CGFloat = 2

onClick

The action triggered when the button is clicked.

@NativeBlockEvent(description: "The action triggered when the button is clicked.")
    var onClick: () -> Void

body

var body: some View