Badge

Those little stickers you see on things to show off or highlight important info, like a number showing how many unread messages you have.

Adding the component

php artisan spur:add essentials/badge

If you use this to add the component, it will automatically add it to config/spur.php and auto-fetch the components files.

config/spur.php
"components": [
  'essentials/badge',
]

If you manually add the component in config/spur.php you would need to run
php artisan spur:fetch to import the component

Usage

Simple Badge

Badge
<x-spur.badge>badge</x-spur.badge>

Badge Border

Badge Badge
<x-spur.badge border>Badge</x-spur.badge>
<x-spur.badge>Badge</x-spur.badge>

Badge Styles

Badge Badge
<x-spur.badge rounded="circular">Badge</x-spur.badge>
<x-spur.badge rounded="rounded">Badge</x-spur.badge>

Badge Colors

Badge Badge Badge Badge Badge
<x-spur.badge color="yellow">Badge</x-spur.badge>
<x-spur.badge color="green">Badge</x-spur.badge>
<x-spur.badge color="indigo">Badge</x-spur.badge>
<x-spur.badge color="blue">Badge</x-spur.badge>
<x-spur.badge color="red">Badge</x-spur.badge>

With Dots

Badge Badge Badge Badge Badge
<x-spur.badge color="yellow" dot>Badge</x-spur.badge>
<x-spur.badge color="green" dot>Badge</x-spur.badge>
<x-spur.badge color="indigo" dot>Badge</x-spur.badge>
<x-spur.badge color="blue" dot>Badge</x-spur.badge>
<x-spur.badge color="red" dot>Badge</x-spur.badge>

Outlined Badge

Badge Badge Badge Badge Badge Badge
<x-spur.badge color="yellow" outline dot>>Badge</x-spur.badge>
<x-spur.badge color="green" outline>>Badge</x-spur.badge>
<x-spur.badge color="indigo" outline rounded="circular">>Badge</x-spur.badge>
<x-spur.badge color="blue" outline dot rounded="circular">>Badge</x-spur.badge>
<x-spur.badge color="red" outline>>Badge</x-spur.badge>
<x-spur.badge outline>>Badge</x-spur.badge>