Button

Overview#

A native button. Renders as a SwiftUI Button with buttonStyle(...) on iOS and a Material3 Button on Android.

Visual styling follows Model 3 — colors, radius, shadow, and typography come from the theme. There are intentionally no per-instance color, background, border, radius, shadow, font-size, or font-weight overrides. For full visual control drop to a <native:pressable> wrapping your own content.

Copied!

<native:button label="Get Started" @press="handleStart" />

<native:button label="Get Started" @press="handleStart" />

Props#

The label can be passed as the label attribute or as slot content between the tags. If both are set, label wins.

label - Button text (optional if using slot content)
variant - Semantic style: primary (default), secondary, destructive, ghost
size - sm, md (default), lg
icon - A leading icon name (optional)
icon-trailing - A trailing icon name (optional)
disabled - Disable the button (optional, boolean, default: false)
loading - Show a spinner in place of the leading icon and prevent presses (optional, boolean, default: false)
a11y-label - Accessibility label override (optional)
a11y-hint - Accessibility hint (optional)
menu - Attach a tap-to-open dropdown; opening the menu shadows @press. See Menus

Events#

@press - Livewire method to call when tapped

Examples#

Variants#

Copied!

<native:column class="w-full gap-3 p-4">
    <native:button label="Save"   variant="primary"     @press="save" />
    <native:button label="Cancel" variant="secondary"   @press="cancel" />
    <native:button label="Delete" variant="destructive" @press="delete" />
    <native:button label="Skip"   variant="ghost"       @press="skip" />
</native:column>

<native:column class="w-full gap-3 p-4">
    <native:button label="Save"   variant="primary"     @press="save" />
    <native:button label="Cancel" variant="secondary"   @press="cancel" />
    <native:button label="Delete" variant="destructive" @press="delete" />
    <native:button label="Skip"   variant="ghost"       @press="skip" />
</native:column>

Sizes#

Copied!

<native:row :gap="8" :align-items="1">
    <native:button label="Small"  size="sm" @press="action" />
    <native:button label="Medium" size="md" @press="action" />
    <native:button label="Large"  size="lg" @press="action" />
</native:row>

<native:row :gap="8" :align-items="1">
    <native:button label="Small"  size="sm" @press="action" />
    <native:button label="Medium" size="md" @press="action" />
    <native:button label="Large"  size="lg" @press="action" />
</native:row>

With icons#

Copied!

<native:button
    label="Continue"
    icon="check"
    icon-trailing="forward"
    @press="next"
/>

<native:button
    label="Continue"
    icon="check"
    icon-trailing="forward"
    @press="next"
/>

Loading state#

Copied!

<native:button label="Saving..." loading @press="save" />

<native:button label="Saving..." loading @press="save" />

Label as slot content#

Copied!

<native:button @press="save" variant="primary">
    Save Changes
</native:button>

<native:button @press="save" variant="primary">
    Save Changes
</native:button>

Element#

Copied!

use Nativephp\NativeUi\Elements\Button;
 
Button::make('Save')
    ->variant('primary')
    ->size('md')
    ->icon('check')
    ->iconTrailing('forward')
    ->disabled(false)
    ->loading(false)
    ->onPress('save');

use Nativephp\NativeUi\Elements\Button;

Button::make('Save')
    ->variant('primary')
    ->size('md')
    ->icon('check')
    ->iconTrailing('forward')
    ->disabled(false)
    ->loading(false)
    ->onPress('save');

make(string $label = '') - Create a button with an optional label
variant(string $value) - primary | secondary | destructive | ghost
size(string $value) - sm | md | lg
icon(string $name) - Leading icon
iconTrailing(string $name) - Trailing icon
disabled(bool $value = true) - Disable the button
loading(bool $value = true) - Show a spinner and prevent presses
a11yLabel(string $value) - Accessibility label override
a11yHint(string $value) - Accessibility hint
onPress(string $method) - Livewire method to invoke on tap