1<x-badge label="Default" />
 2<x-badge primary label="Primary" />
 3<x-badge secondary label="Secondary" />
 4<x-badge positive label="Positive" />
 5<x-badge negative label="Negative" />
 6<x-badge warning label="Warning" />
 7<x-badge info label="Info" />
 8<x-badge dark label="Dark" />
 9<x-badge white label="White" />
10<x-badge black label="Black" />
11<x-badge slate label="Slate" />
12<x-badge gray label="Gray" />
13<x-badge zinc label="Zinc" />
14<x-badge neutral label="Neutral" />
15<x-badge stone label="Stone" />
16<x-badge red label="Red" />
17<x-badge orange label="Orange" />
18<x-badge amber label="Amber" />
19<x-badge lime label="Lime" />
20<x-badge green label="Green" />
21<x-badge emerald label="Emerald" />
22<x-badge teal label="Teal" />
23<x-badge cyan label="Cyan" />
24<x-badge sky label="Sky" />
25<x-badge blue label="Blue" />
26<x-badge indigo label="Indigo" />
27<x-badge violet label="Violet" />
28<x-badge purple label="Purple" />
29<x-badge fuchsia label="Fuchsia" />
30<x-badge pink label="Pink" />
31<x-badge rose label="Rose" />

 1<x-badge outline label="Default" />
 2<x-badge outline primary label="Primary" />
 3<x-badge outline secondary label="Secondary" />
 4<x-badge outline positive label="Positive" />
 5<x-badge outline negative label="Negative" />
 6<x-badge outline warning label="Warning" />
 7<x-badge outline info label="Info" />
 8<x-badge outline dark label="Dark" />
 9<x-badge outline white label="White" />
10<x-badge outline black label="Black" />
11<x-badge outline slate label="Slate" />
12<x-badge outline gray label="Gray" />
13<x-badge outline zinc label="Zinc" />
14<x-badge outline neutral label="Neutral" />
15<x-badge outline stone label="Stone" />
16<x-badge outline red label="Red" />
17<x-badge outline orange label="Orange" />
18<x-badge outline amber label="Amber" />
19<x-badge outline lime label="Lime" />
20<x-badge outline green label="Green" />
21<x-badge outline emerald label="Emerald" />
22<x-badge outline teal label="Teal" />
23<x-badge outline cyan label="Cyan" />
24<x-badge outline sky label="Sky" />
25<x-badge outline blue label="Blue" />
26<x-badge outline indigo label="Indigo" />
27<x-badge outline violet label="Violet" />
28<x-badge outline purple label="Purple" />
29<x-badge outline fuchsia label="Fuchsia" />
30<x-badge outline pink label="Pink" />
31<x-badge outline rose label="Rose" />

 1<x-badge flat label="Default" />
 2<x-badge flat primary label="Primary" />
 3<x-badge flat secondary label="Secondary" />
 4<x-badge flat positive label="Positive" />
 5<x-badge flat negative label="Negative" />
 6<x-badge flat warning label="Warning" />
 7<x-badge flat info label="Info" />
 8<x-badge flat dark label="Dark" />
 9<x-badge flat white label="White" />
10<x-badge flat black label="Black" />
11<x-badge flat slate label="Slate" />
12<x-badge flat gray label="Gray" />
13<x-badge flat zinc label="Zinc" />
14<x-badge flat neutral label="Neutral" />
15<x-badge flat stone label="Stone" />
16<x-badge flat red label="Red" />
17<x-badge flat orange label="Orange" />
18<x-badge flat amber label="Amber" />
19<x-badge flat lime label="Lime" />
20<x-badge flat green label="Green" />
21<x-badge flat emerald label="Emerald" />
22<x-badge flat teal label="Teal" />
23<x-badge flat cyan label="Cyan" />
24<x-badge flat sky label="Sky" />
25<x-badge flat blue label="Blue" />
26<x-badge flat indigo label="Indigo" />
27<x-badge flat violet label="Violet" />
28<x-badge flat purple label="Purple" />
29<x-badge flat fuchsia label="Fuchsia" />
30<x-badge flat pink label="Pink" />
31<x-badge flat rose label="Rose" />

1<x-badge rounded label="No Color" />
2<x-badge rounded primary label="Primary" />
3<x-badge rounded secondary label="Secondary" />
4<x-badge rounded positive label="Positive" />
5<x-badge rounded negative label="Negative" />
6<x-badge rounded warning label="Warning" />
7<x-badge rounded info label="Info" />
8<x-badge rounded dark label="Dark" />

1<x-badge squared label="No Color" />
2<x-badge squared primary label="Primary" />
3<x-badge squared secondary label="Secondary" />
4<x-badge squared positive label="Positive" />
5<x-badge squared negative label="Negative" />
6<x-badge squared warning label="Warning" />
7<x-badge squared info label="Info" />
8<x-badge squared dark label="Dark" />

 1<x-badge.circle icon="home" />
 2<x-badge.circle primary icon="pencil" />
 3<x-badge.circle secondary icon="clipboard-list"  />
 4<x-badge.circle positive icon="check" />
 5<x-badge.circle negative icon="x" />
 6<x-badge.circle warning icon="exclamation" />
 7<x-badge.circle info icon="information-circle" />
 8<x-badge.circle dark icon="ban" />
 9<x-badge.circle secondary label="A"  />
10<x-badge.circle positive label="B" />
11<x-badge.circle negative label="C" />
12<x-badge.circle primary label="+" />

1<x-badge icon="home" label="Default" />
2<x-badge icon="pencil" primary label="Primary" />
3<x-badge icon="clipboard-list" secondary label="Secondary" />
4<x-badge icon="check" positive label="Positive" />
5<x-badge icon="x" negative label="Negative" />
6<x-badge icon="exclamation" warning label="Warning" />
7<x-badge right-icon="information-circle" info label="Info" />
8<x-badge right-icon="ban" dark label="Dark" />

1<x-badge icon="clipboard-list" secondary label="default size" />
2<x-badge md icon="clipboard-list" positive label="md size" />
3<x-badge lg icon="clipboard-list" negative label="lg size" />

 1<x-badge flat primary label="Prepend">
 2    <x-slot name="prepend" class="relative flex items-center w-2 h-2">
 3        <span class="absolute inline-flex w-full h-full rounded-full opacity-75 bg-cyan-500 animate-ping"></span>
 4        <span class="relative inline-flex w-2 h-2 rounded-full bg-cyan-500"></span>
 5    </x-slot>
 6</x-badge>
 7 
 8<x-badge flat primary label="Append">
 9    <x-slot name="append" class="relative flex items-center w-2 h-2">
10        <span class="absolute inline-flex w-full h-full rounded-full opacity-75 bg-cyan-500 animate-ping"></span>
11        <span class="relative inline-flex w-2 h-2 rounded-full bg-cyan-500"></span>
12    </x-slot>
13</x-badge>
14 
15<x-badge flat red label="Laravel">
16    <x-slot name="append" class="relative flex items-center w-2 h-2">
17        <button type="button">
18            <x-icon name="x" class="w-4 h-4" />
19        </button>
20    </x-slot>
21</x-badge>