Buttons Components

Jump to:

Livewire Button with Loading Indicator

Button with Loading Indicator using Livewire and Tailwind CSS

UI Stack: Tailwind CSS, New, Livewire

Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted

Overview

This document provides implementation instructions for a Laravel Livewire component called ButtonWithLoadingSpinner. This component generates a button that displays a loading spinner when clicked, giving a visual indication to the user that the submitted request is being processed.

Installation

The ButtonWithLoadingSpinner component consists of two parts, a PHP class file and a Blade view file. Here's how you can integrate them into your Laravel project:

  • Copy the PHP file to your app/Livewire directory. Rename the class file to match the new path if necessary.
  • Copy the Blade view file to your resources/views/livewire directory. Update the view path in the render method if necessary.

Integration

To utilize the ButtonWithLoadingSpinner component in your Laravel project, include it in your Blade files as a Livewire component:

@livewire('button-with-loading-spinner')

Usage

The ButtonWithLoadingSpinner component is easy to use. When the button is clicked, it calls the submit method in its Livewire component, causing the button to display a loading spinner.

Configuration and Customization

You can customize the ButtonWithLoadingSpinner component to fit your needs. For instance, you can modify the submit method in the Livewire component to perform different actions when the button is clicked. You can also customize the appearance of the button by editing the Blade view file.

Remember to keep the wire:click="submit" and wire:loading directives in the button tag so that the loading spinner will be displayed when the button is clicked.

Segmented Control

A tab-style range switch with one selected segment.

Segmented control

One choice, arrow keys, and a Livewire action when the segment changes.

The default view for a product dashboard.

Code
Please login to View/Download the Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted

Day, week, month, year. The selected segment calls select, which ignores anything outside the option list.

Components on this page

2 components