README

A small Livewire component that shows an invoice payment status as a coloured badge: draft, sent, paid, overdue or void. It's styled with Tailwind CSS utility classes and works with Livewire 3 and Livewire 4.

It's the PaymentStatusBadge component from Billstack, released on its own under the MIT license. It is UI only: it doesn't talk to a payment provider or decide what status an invoice has. You pass the status in.

What's in the package

<livewire:billstack-status-badge />, the component (Strataface\BillstackStatusBadge\Livewire\PaymentStatusBadge)
Strataface\BillstackStatusBadge\Enums\PaymentStatus, a string-backed enum with a label and badge classes for each status, plus tryFromMixed() for parsing
A service provider, registered automatically through Laravel package discovery
6 PHPUnit tests

Requirements

PHP ^8.2
Laravel 10 or later (illuminate/support ^10 to ^13)
Livewire ^3.0 or ^4.0
Tailwind CSS in your app (the package ships no CSS)

Install

composer require strataface/billstack-status-badge

The service provider is discovered automatically. There's no config file and nothing to publish.

Let Tailwind see the classes

The badge colours are Tailwind utility classes defined in the package's PHP enum and Blade view. Tailwind only generates classes it finds in the files it scans, so add the package to your sources.

Tailwind CSS v4 (for example resources/css/app.css):

@source '../../vendor/strataface/billstack-status-badge/src/**/*.php';
@source '../../vendor/strataface/billstack-status-badge/resources/views/**/*.blade.php';

Tailwind CSS v3 (tailwind.config.js):

content: [
    // ...your existing paths
    './vendor/strataface/billstack-status-badge/src/**/*.php',
    './vendor/strataface/billstack-status-badge/resources/views/**/*.blade.php',
],

Usage

<livewire:billstack-status-badge status="paid" />

{{-- from a variable --}}
<livewire:billstack-status-badge :status="$invoice->status" />

{{-- dot only; the label stays available to screen readers --}}
<livewire:billstack-status-badge status="overdue" :show-label="false" />

Property	Type	Default	Notes
`status`	string	`draft`	`draft`, `sent`, `paid`, `overdue` or `void`, case-insensitive. Any other value is shown as Draft.
`showLabel`	bool	`true`	When `false`, shows a dot and keeps the label in an `sr-only` span.

The rendered <span> also carries a billstack-status-badge class, so you can target it in your own CSS.

You can use the enum on its own, for example to label statuses elsewhere:

use Strataface\BillstackStatusBadge\Enums\PaymentStatus;

$status = PaymentStatus::tryFromMixed('PAID') ?? PaymentStatus::Draft;
$status->label();        // "Paid"
$status->badgeClasses(); // "bg-emerald-100 text-emerald-800 ring-emerald-200"

If your billing backend uses other names (Stripe, for example, uses open and uncollectible), map them to these five values before passing them in.

Tests

composer install
vendor/bin/phpunit

The full Billstack kit

This badge is one of five components in Billstack, a paid Livewire pack for customer and admin billing portals. The full kit has 4 more components:

InvoiceLineEditor: add, remove and reorder invoice lines, quantity × unit price, live subtotal
TaxSummary: taxable base, tax rate and an inclusive/exclusive toggle
CustomerInvoiceTable: a customer-portal invoice list with search and a status filter
RecurringScheduleFields: interval and next-run fields (data and UI only)

It also includes its own math helpers, a local demo with sample data and a larger test suite. Like this package, it's UI only: no payment provider, tax engine, PDF generation or email delivery.

License

MIT. See LICENSE.

This package is not affiliated with or endorsed by Laravel or Livewire. Laravel and Livewire are separate open-source projects and are not included.

strataface / billstack-status-badge

Package info

Security

Statistics