Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Badge

A compact, unshadowed label. Use it for status, counts, and inline metadata.

Usage
Badge
example.blade.php 
<x-slate::badge>Badge</x-slate::badge>

Variants
Default Secondary Outline Destructive
example.blade.php 
<div class="flex flex-wrap gap-2">
    <x-slate::badge>Default</x-slate::badge>
    <x-slate::badge variant="secondary">Secondary</x-slate::badge>
    <x-slate::badge variant="outline">Outline</x-slate::badge>
    <x-slate::badge variant="destructive">Destructive</x-slate::badge>
</div>
New
example.blade.php 
<x-slate::badge as="a" variant="outline" href="/components">
    New
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6" /></svg>
</x-slate::badge>

Props
Prop Type Default Description
variant default, secondary, outline, destructive default Visual style
as span, a span HTML element
Last updated .