Streamline the Laravel SaaS Starter Kit - Launch Your Next SaaS Today

Badge

Badges display status or counts

x-t-badge

Preview and Examples

default badge
brand badge
primary badge
secondary badge
success badge
warning badge
danger badge
<x-turbine-ui-badge>default badge</x-turbine-ui-badge>
 
<x-turbine-ui-badge variant="brand">brand badge</x-turbine-ui-badge>
 
<x-turbine-ui-badge variant="primary">primary badge</x-turbine-ui-badge>
 
<x-turbine-ui-badge variant="secondary">secondary badge</x-turbine-ui-badge>
 
<x-turbine-ui-badge variant="success">success badge</x-turbine-ui-badge>
 
<x-turbine-ui-badge variant="warning">warning badge</x-turbine-ui-badge>
 
<x-turbine-ui-badge variant="danger">danger badge</x-turbine-ui-badge>
        

Attributes

Name Type Options Description
accent boolean
true false
Adds an accent
border boolean
true false
Adds a border
hollow boolean
true false
Removes background colour
icon string
string
Adds an icon
prefix string
string
Adds content to the start
ring boolean
true false
Adds a ring
rounded boolean
true false
Adds rounded corners
shadow boolean
true false
Adds a shadow
size string
xs sm md lg xl 2xl
Controls component scale
suffix string
string
Adds content to the end
variant string
default brand primary secondary success warning danger light dark
A variant is like a colour palette