UI Components

Badge

You can easily customize any badge using standard css classes and icon using the class:icon attribute.

Cyber Week Mega Offer!

Huge discounts on all Hostinger plans

Use our referral link for an extra 20% off!

# Basic usage

Primary Secondary Black White Slate Zinc Gray Neutral Stone Red Orange Amber Yellow Lime Green Emerald Teal Cyan Sky Blue Indigo Violet Purple Fuchsia Pink Rose

<x-badge label="Primary" />
<x-badge label="Secondary" secondary />
<x-badge label="Black" black />
<x-badge label="White" white />
<x-badge label="Slate" slate />
<x-badge label="Zinc" zinc />
<x-badge label="Gray" gray />
<x-badge label="Neutral" neutral />
<x-badge label="Stone" stone />
<x-badge label="Red" red />
<x-badge label="Orange" orange />
<x-badge label="Amber" amber />
<x-badge label="Yellow" yellow />
<x-badge label="Lime" lime />
<x-badge label="Green" green />
<x-badge label="Emerald" emerald />
<x-badge label="Teal" teal />
<x-badge label="Cyan" cyan />
<x-badge label="Sky" sky />
<x-badge label="Blue" blue />
<x-badge label="Indigo" Indigo />
<x-badge label="Violet" violet />
<x-badge label="Purple" purple />
<x-badge label="Fuchsia" fuchsia />
<x-badge label="Pink" pink />
<x-badge label="Rose" rose />

# Outline badges

Primary Secondary Black White Slate Zinc Gray Neutral Stone Red Orange Amber Yellow Lime Green Emerald Teal Cyan Sky Blue Indigo Violet Purple Fuchsia Pink Rose

<x-badge label="Primary" outline />
<x-badge label="Secondary" secondary outline />
<x-badge label="Black" black outline />
<x-badge label="White" white outline />
<x-badge label="Slate" slate outline />
<x-badge label="Zinc" zinc outline />
<x-badge label="Gray" gray outline />
<x-badge label="Neutral" neutral outline />
<x-badge label="Stone" stone outline />
<x-badge label="Red" red outline />
<x-badge label="Orange" orange outline />
<x-badge label="Amber" amber outline />
<x-badge label="Yellow" yellow outline />
<x-badge label="Lime" lime outline />
<x-badge label="Green" green outline />
<x-badge label="Emerald" emerald outline />
<x-badge label="Teal" teal outline />
<x-badge label="Cyan" cyan outline />
<x-badge label="Sky" sky outline />
<x-badge label="Blue" blue outline />
<x-badge label="Indigo" Indigo outline />
<x-badge label="Violet" violet outline />
<x-badge label="Purple" purple outline />
<x-badge label="Fuchsia" fuchsia outline />
<x-badge label="Pink" pink outline />
<x-badge label="Rose" rose outline />

# Badge with icon

Home Delete View Edit Save

<x-badge label="Home" icon="home" purple />
<x-badge label="Delete" icon="trash" red />
<x-badge label="View" icon="eye" gray />
<x-badge label="Edit" icon="pencil-square" amber />
<x-badge label="Save" icon="bookmark-square" green />

# Badge size

Badge Badge Badge Badge Badge

<x-badge label="Badge" sm />
<x-badge label="Badge" md />
<x-badge label="Badge" lg />
<x-badge label="Badge" xl />
<x-badge label="Badge" 2xl />

# Rounded corner

Rounded none Rounded sm Rounded Default Rounded md Rounded lg Rounded xl Rounded 2xl Rounded 3xl Rounded full

<x-badge label="Rounded none" rounded-none />
<x-badge label="Rounded sm" rounded-sm />
<x-badge label="Rounded Default" />
<x-badge label="Rounded md" rounded-md />
<x-badge label="Rounded lg" rounded-lg />
<x-badge label="Rounded xl" rounded-xl />
<x-badge label="Rounded 2xl" rounded-2xl />
<x-badge label="Rounded 3xl" rounded-3xl />
<x-badge label="Rounded full" rounded-full />