Koyaka
Patreon

Badge

Badge Basic

Preview Code
Badge 

    <span class="badge">Badge</span>

Badge Sizes

Preview Code
Badge Badge Badge Badge Badge 

    <span class="badge xs">Badge</span>
    <span class="badge sm">Badge</span>
    <span class="badge md">Badge</span>
    <span class="badge lg">Badge</span>
    <span class="badge xl">Badge</span>

Badge Colors

Preview Code
Badge Badge Badge Badge Badge Badge Badge Badge 

    <span class="badge">Badge</span>
    <span class="badge primary">Badge</span>
    <span class="badge secondary">Badge</span>
    <span class="badge accent">Badge</span>
    <span class="badge info">Badge</span>
    <span class="badge success">Badge</span>
    <span class="badge warning">Badge</span>
    <span class="badge danger">Badge</span>

Soft Badges

Preview Code
Badge Badge Badge Badge Badge Badge Badge 

    <span class="badge primary soft">Badge</span>
    <span class="badge secondary soft">Badge</span>
    <span class="badge accent soft">Badge</span>
    <span class="badge info soft">Badge</span>
    <span class="badge success soft">Badge</span>
    <span class="badge warning soft">Badge</span>
    <span class="badge danger soft">Badge</span>

Outlined Badges

Preview Code
Badge Badge Badge Badge Badge Badge Badge 

    <span class="badge primary outlined">Badge</span>
    <span class="badge secondary outlined">Badge</span>
    <span class="badge accent outlined">Badge</span>
    <span class="badge info outlined">Badge</span>
    <span class="badge success outlined">Badge</span>
    <span class="badge warning outlined">Badge</span>
    <span class="badge danger outlined">Badge</span>

Soft + Outlined

Preview Code
Badge Badge Badge Badge Badge Badge Badge 

    <span class="badge soft primary outlined">Badge</span>
    <span class="badge secondary soft outlined">Badge</span>
    <span class="badge accent soft outlined">Badge</span>
    <span class="badge info soft outlined">Badge</span>
    <span class="badge success soft outlined">Badge</span>
    <span class="badge warning soft outlined">Badge</span>
    <span class="badge danger soft outlined">Badge</span>

Badge Groups

Preview Code
npm 1.0.4
build passing
Status 500 

    <div class="flex gap-2 items-center">
        <div class="group">
            <span class="badge">npm</span>
            <span class="badge info">1.0.4</span>
        </div>
        <div class="group">
            <span class="badge">build</span>
            <span class="badge success">passing</span>
        </div>
        <div class="group">
            <span class="badge">Status</span>
            <span class="badge danger">500</span>
        </div>
    </div>

Advanced Badges

Preview Code
Status
Status
Status Link 

    <div class="flex gap-2 items-center">
        <span class="badge info rounded lg">
            <span>Status</span>
            <div class="icon">
                <i class="fa-solid fa-xmark"></i>
            </div>
        </span>

        <span class="badge info rounded lg">
            <div class="spinner"></div>
            <span>Status</span>
            <div class="icon">
                <i class="fa-solid fa-xmark"></i>
            </div>
        </span>

        <span class="badge info ghost">Status</span>
        <span class="badge info link">Link</span>
    </div>

Contents