PHPackages                             mrshanebarron/button - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. mrshanebarron/button

ActiveLibrary[Templating & Views](/categories/templating)

mrshanebarron/button
====================

Customizable button component for Laravel - supports Livewire and Vue

v1.0.5(4mo ago)016MITBladePHP ^8.1

Since Dec 14Pushed 4mo agoCompare

[ Source](https://github.com/mrshanebarron/button)[ Packagist](https://packagist.org/packages/mrshanebarron/button)[ RSS](/packages/mrshanebarron-button/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (2)Dependencies (1)Versions (7)Used By (0)

Button
======

[](#button)

A versatile, customizable button component for Laravel applications. Supports multiple variants, sizes, loading states, and icons. Works with Livewire and Vue 3.

Installation
------------

[](#installation)

```
composer require mrshanebarron/button
```

Livewire Usage
--------------

[](#livewire-usage)

### Basic Usage

[](#basic-usage)

```
Click Me
```

### Variants

[](#variants)

```
Primary
Secondary
Success
Danger
Warning
Outline
Ghost
```

### Sizes

[](#sizes)

```
Extra Small
Small
Medium
Large
Extra Large
```

### Loading State

[](#loading-state)

```
Processing...
```

### As Link

[](#as-link)

```
Go to Dashboard
```

### Disabled

[](#disabled)

```
Disabled
```

### Livewire Props

[](#livewire-props)

PropTypeDefaultDescription`type`string`'button'`Button type: `button`, `submit`, `reset``variant`string`'primary'`Visual style variant`size`string`'md'`Size: `xs`, `sm`, `md`, `lg`, `xl``disabled`boolean`false`Disable button`loading`boolean`false`Show loading spinner`href`string`null`Render as anchor linkVue 3 Usage
-----------

[](#vue-3-usage)

### Setup

[](#setup)

```
import { SbButton } from './vendor/sb-button';
app.component('SbButton', SbButton);
```

### Basic Usage

[](#basic-usage-1)

```

  Click Me

```

### Variants

[](#variants-1)

```

  Primary
  Secondary
  Success
  Danger
  Warning
  Outline
  Ghost

```

### With Icons

[](#with-icons)

```

    Save

    Next

    Download

```

### Loading State

[](#loading-state-1)

```

    {{ isSubmitting ? 'Saving...' : 'Save' }}

```

### Vue Props

[](#vue-props)

PropTypeDefaultDescription`type`String`'button'`Button type attribute`variant`String`'primary'`Style: `primary`, `secondary`, `success`, `danger`, `warning`, `outline`, `ghost``size`String`'md'`Size: `xs`, `sm`, `md`, `lg`, `xl``disabled`Boolean`false`Disable interactions`loading`Boolean`false`Show spinner, disable button`href`String`null`Render as `` tag`icon`String`null`HTML icon content`iconPosition`String`'left'`Position: `left` or `right`### Slots

[](#slots)

SlotDescriptiondefaultButton content`iconLeft`Left icon slot`iconRight`Right icon slotStyling
-------

[](#styling)

The button uses Tailwind CSS classes. Each variant has distinct colors:

- **primary**: Blue background
- **secondary**: Gray background
- **success**: Green background
- **danger**: Red background
- **warning**: Yellow background
- **outline**: Border only
- **ghost**: No background, hover effect

Accessibility
-------------

[](#accessibility)

- Proper `disabled` and `aria-disabled` attributes
- Focus ring for keyboard navigation
- Loading state disables interaction
- Supports native button types

Requirements
------------

[](#requirements)

- PHP 8.1+
- Laravel 10, 11, or 12
- Tailwind CSS 3.x

License
-------

[](#license)

MIT License

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance74

Regular maintenance activity

Popularity6

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1 days

Total

6

Last Release

149d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/7a38dc9b4ccc180ee3e9df8879f8747ea9dbf36812c6546827fe504fa8993eb8?d=identicon)[mrshanebarron](/maintainers/mrshanebarron)

---

Tags

laraveluilivewirebuttonvue

### Embed Badge

![Health badge](/badges/mrshanebarron-button/health.svg)

```
[![Health](https://phpackages.com/badges/mrshanebarron-button/health.svg)](https://phpackages.com/packages/mrshanebarron-button)
```

###  Alternatives

[robsontenorio/mary

Gorgeous UI components for Livewire powered by daisyUI and Tailwind

1.5k454.7k15](/packages/robsontenorio-mary)[roots/acorn

Framework for Roots WordPress projects built with Laravel components.

9682.1M97](/packages/roots-acorn)[developermithu/tallcraftui

TallCraftUI is a Laravel blade UI components library built on TALL stack

1672.4k](/packages/developermithu-tallcraftui)[mati365/ckeditor5-livewire

CKEditor 5 integration for Laravel Livewire

413.9k](/packages/mati365-ckeditor5-livewire)[electrik/slate

Slate - a Laravel Blade UI Kit is a set of anonymous blade components built using TailwindCSS v4 with built-in dark mode support for your next Laravel project

102.3k1](/packages/electrik-slate)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)