Laravel Toggle Button Component

Free · MIT

A button that stays down, and says so.

A Toggle Button built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are contrast-tested against WCAG 2.1 AA/UI in CI, in both themes — see what's covered. Drop it in with a single Blade tag: <x-aura::toggle-button>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<div class="flex gap-2">
    <x-aura::toggle-button icon="star" label="Add to favourites" pressed-label="Remove from favourites" />
    <x-aura::toggle-button icon="bell" label="Mute notifications" />
    <x-aura::toggle-button :pressed="true">Bold</x-aura::toggle-button>
</div>

See the full API, props and live examples in the Toggle Button documentation.

Overview

<x-aura::toggle-button> is a button whose state persists — bold, mute, pin, favourite.

Props

Prop	Type	Default	Description
`pressed`	`bool`	`false`	Initial state.
`label`	`string\|null`	`null`	Name while not pressed.
`pressedLabel`	`string\|null`	`null`	Name while pressed.
`icon`	`string\|null`	`null`	Icon name.
`size`	`string`	`'md'`	`sm`, `md`, `lg`.
`variant`	`string`	`'secondary'`	`secondary`, `ghost`.