Badge
Badges can be used to highlight information such as status, category, and count.
<sa-badge variant="Default">
<sa-icon name="plane"/>
Flight Booked
</sa-badge>
<sa-badge variant="Secondary">Requires Visa</sa-badge>
<sa-badge variant="Destructive">
<sa-icon name="flame"/>
Overbooked
</sa-badge>Usage
<sa-badge variant="...">...</sa-badge>Examples
Variants
Use variants to communicate different types of information categories.
<sa-badge>Default</sa-badge>
<sa-badge variant="Secondary">Secondary</sa-badge>
<sa-badge variant="Outline">Outline</sa-badge>
<sa-badge variant="Destructive">Destructive</sa-badge>Custom CSS
Add Custom CSS classes to create custom badges
<sa-badge variant="Outline"
class="text-green-700 border-green-700 bg-green-50">
<sa-icon name="leaf"/>
Eco-tourism Trip
</sa-badge>
<sa-badge variant="Outline"
class="text-indigo-600 border-indigo-600 font-bold bg-indigo-50 shadow-md">
<sa-icon name="pickaxe"/>
Adventure Seeker
</sa-badge>
<sa-badge variant="Outline"
class="border-transparent bg-linear-to-r from-orange-500 to-red-500 text-white shadow-lg">
<sa-icon name="zap"/>
Selling Fast!
</sa-badge>