Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add toggle-button

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

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

Not a switch

A toggle is a setting: on or off, like a light. A toggle button performs an action whose state happens to stick. aria-pressed is what tells them apart; without it a screen reader announces an ordinary button that appears to do nothing when pressed.

Basic 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>

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.

Events

Dispatches aura-toggled with { pressed }, so Livewire or Alpine can act on it.

Accessibility

  • aria-pressed reflects the state, and the name changes with it when you supply pressedLabel — "Add to favourites" becoming "Remove from favourites" says more than a star changing colour.
  • Every size is at least 32px, over the 24×24 that WCAG 2.2 asks of a target.