Logo
Neura
Back to Home

Getting Started

Introduction
Installation
Usage
Dark Mode
Theming
Layouts

Components

Atoms

Form Elements

Field
Label
Description
Fieldset
Form
Input
Textarea
Select
Autocomplete
Calendar
Date Picker
Rich Editor
Checkbox
Radio
Switch
OTP
Dropzone
Tags Input

Layout

Container
Grid
Stack
Box
Card
Divider
Spacer

Navigation

Navlist
Link

Feedback

Alert
Callout
Toast
Dialog
Modal
Popover

Content

Text
Heading
Brand
Lottie
Skeleton

Data Display

Table
Chart
Kanban
Image Gallery
Tabs
Accordion
Badge
Avatar

Actions

Button
Command Palette
Composer
Context Menu
Dropdown

Utilities

Theme Switcher
Wizard

Button

Clickable buttons with multiple variants, sizes, and states

Basic Usage

The most basic button with default styling: 
<neura::button>
    Default Button
</neura::button>

Variants

Buttons come in multiple variants to convey different actions and importance:

Semantic Colors

Use semantic color variants that automatically adapt to your theme configuration: 
<neura::button variant="primary">Primary</neura::button>
<neura::button variant="secondary">Secondary</neura::button>
<neura::button variant="danger">Danger</neura::button>
<neura::button variant="success">Success</neura::button>
<neura::button variant="warning">Warning</neura::button>
<neura::button variant="info">Info</neura::button>

Style Variants

Five style variants are available: solid, dark, outline, soft, and ghost. 
<neura::button variant="solid">Solid</neura::button>
<neura::button variant="dark">Dark</neura::button>
<neura::button variant="outline">Outline</neura::button>
<neura::button variant="soft">Soft</neura::button>
<neura::button variant="ghost">Ghost</neura::button>

Default Style Variants

The primary and secondary colors use the dark style by default (dark background in light mode, light background in dark mode). All other colors default to solid style.

Combined Variants

Combine semantic colors with style variants using the color-style format: 
<neura::button variant="danger-outline">Danger Outline</neura::button>
<neura::button variant="danger-soft">Danger Soft</neura::button>
<neura::button variant="danger-ghost">Danger Ghost</neura::button>
<neura::button variant="success-outline">Success Outline</neura::button>
<neura::button variant="success-soft">Success Soft</neura::button>

Sizes

Buttons are available in four different sizes: 
<neura::button variant="primary" size="xs">Extra Small</neura::button>
<neura::button variant="primary" size="sm">Small</neura::button>
<neura::button variant="primary" size="md">Medium</neura::button>
<neura::button variant="primary" size="lg">Large</neura::button>

With Icons

Add icons before or after button text: 
<neura::button variant="primary" icon="arrow-left">
    Back
</neura::button>

<neura::button variant="primary" iconAfter="arrow-right">
    Next
</neura::button>

<neura::button variant="outline" icon="plus">
    Add Item
</neura::button>

Icon Only

Buttons automatically become squared when no text content is provided: 
<neura::button variant="primary" icon="plus" size="xs"></neura::button>
<neura::button variant="primary" icon="plus" size="sm"></neura::button>
<neura::button variant="primary" icon="plus" size="md"></neura::button>
<neura::button variant="primary" icon="plus" size="lg"></neura::button>

Button Groups

Group multiple buttons together for related actions. Button groups can be displayed horizontally or vertically, and buttons can be attached (no gap) or separated:

Attached (Default)

Buttons are connected with no gap between them: 
<neura::button-group>
    <neura::button variant="outline">Left</neura::button>
    <neura::button variant="outline">Middle</neura::button>
    <neura::button variant="outline">Right</neura::button>
</neura::button-group>

Separated

Buttons have a small gap between them: 
<neura::button-group :attached="false">
    <neura::button variant="outline">Left</neura::button>
    <neura::button variant="outline">Middle</neura::button>
    <neura::button variant="outline">Right</neura::button>
</neura::button-group>

Vertical Group

Stack buttons vertically: 
<neura::button-group vertical>
    <neura::button variant="outline">Top</neura::button>
    <neura::button variant="outline">Middle</neura::button>
    <neura::button variant="outline">Bottom</neura::button>
</neura::button-group>

With Different Variants

You can mix different button variants within a group: 
<neura::button-group>
    <neura::button variant="primary">Save</neura::button>
    <neura::button variant="outline">Cancel</neura::button>
    <neura::button variant="ghost">Delete</neura::button>
</neura::button-group>

With Icons 

<neura::button-group>
    <neura::button variant="outline" icon="arrow-left">Previous</neura::button>
    <neura::button variant="outline" iconAfter="arrow-right">Next</neura::button>
</neura::button-group>

Colors

Use the color attribute to apply Tailwind colors. Colors work with all style variants:

Chromatic Colors

Gray Colors

Gray scale colors for neutral or subtle actions: 
<!-- Chromatic colors -->
<neura::button variant="solid" color="red">Red</neura::button>
<neura::button variant="solid" color="blue">Blue</neura::button>
<neura::button variant="solid" color="green">Green</neura::button>

<!-- Gray colors -->
<neura::button variant="solid" color="slate">Slate</neura::button>
<neura::button variant="solid" color="gray">Gray</neura::button>
<neura::button variant="solid" color="zinc">Zinc</neura::button>
<neura::button variant="solid" color="neutral">Neutral</neura::button>
<neura::button variant="solid" color="stone">Stone</neura::button>

Colors with Style Variants

Colors work with all style variants. Here are examples showing the blue color with each variant:

Solid

Dark

Outline

Soft

Ghost 

<!-- Solid variant -->
<neura::button variant="solid" color="blue">Blue</neura::button>

<!-- Dark variant (inverted in dark mode) -->
<neura::button variant="dark" color="blue">Blue</neura::button>

<!-- Outline variant -->
<neura::button variant="outline" color="blue">Blue</neura::button>

<!-- Soft variant -->
<neura::button variant="soft" color="blue">Blue</neura::button>

<!-- Ghost variant -->
<neura::button variant="ghost" color="blue">Blue</neura::button>

Loading States

Buttons support multiple ways to display a loading state:

Manual Loading

Use the loading="true" attribute to manually display a loading state: 
<neura::button variant="primary" loading="true">
    Loading...
</neura::button>

<neura::button variant="outline" loading="true">
    Loading...
</neura::button>

Loading with Livewire (Automatic)

The button automatically detects Livewire actions and displays loading during execution:
The spinner appears automatically on click 
<neura::button 
    variant="primary" 
    wire:click="save"
>
    Save
</neura::button>

Loading with Specific Target

Control which button displays loading by specifying a wire:target: 
<neura::button 
    variant="primary" 
    wire:click="save"
    wire:target="save"
>
    Save
</neura::button>

<neura::button 
    variant="outline" 
    wire:click="cancel"
    wire:target="cancel"
>
    Cancel
</neura::button>

Loading with Disabled

The button is automatically disabled during loading to prevent multiple clicks:
Multiple clicks prevented automatically

Loading with Different Sizes 

<neura::button loading="true" size="xs">XS</neura::button>
<neura::button loading="true" size="sm">Small</neura::button>
<neura::button loading="true" size="md">Medium</neura::button>
<neura::button loading="true" size="lg">Large</neura::button>

Loading Icon Only

Icon-only buttons also display the spinner: 
<neura::button loading="true" icon="plus"></neura::button>
<neura::button loading="true" icon="cog"></neura::button>

Loading Behavior

During loading, the button text and icon become transparent and an animated spinner appears in the center. The button maintains its size and shape to prevent layout shifts.

Livewire Integration

Buttons work seamlessly with Livewire actions and loading states:
Count: 0 
<neura::button 
    variant="primary" 
    wire:click="increment"
    icon="plus"
>
    Increment
</neura::button>

As Links

Buttons can be rendered as links using the href attribute:
Go to Home View All Atoms 
<neura::button variant="primary" href="https://docs.neuraui.dev">
    Go to Home
</neura::button>

Disabled State

Disable buttons to prevent user interaction: 
<neura::button variant="primary" disabled>
    Disabled Primary
</neura::button>

Properties

Property Type Default Description
variant string primary Button variant. Can be a semantic color (primary, secondary, danger, success, warning, info), a style (solid, dark, outline, soft, ghost), or a combination (danger-outline, success-soft)
size string sm Button size (xs, sm, md, lg)
color string null Tailwind color name. Chromatic: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose. Gray: slate, gray, zinc, neutral, stone
icon string null Icon name before text
iconAfter string null Icon name after text
type string button HTML button type
loading boolean false Show loading spinner (auto-detected with wire:click)
disabled boolean false Disable button interaction
href string null Render as link with URL

Button Group Properties

Property Type Default Description
size string sm Default size for buttons in the group
variant string outline Default variant for buttons in the group
color string null Default color for buttons in the group
vertical boolean false Stack buttons vertically
attached boolean true Connect buttons with no gap (false for separated buttons)