Lineone - Badge Element

Badge

Code

Badges are used to inform user of the status of specific data. Check out code for detail of usage.

Default

Primary

Secondary

Info

Success

Warning

Error

Dark

Light

                
  <div
    class="badge bg-slate-150 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
  >
    Default
  </div>
  <div class="badge bg-primary text-white dark:bg-accent">Primary</div>
  <div class="badge bg-secondary text-white">Secondary</div>
  <div class="badge bg-info text-white">Info</div>
  <div class="badge bg-success text-white">Success</div>
  <div class="badge bg-warning text-white">Warning</div>
  <div class="badge bg-error text-white">Error</div>
  <div class="badge bg-navy-700 text-white dark:bg-navy-900">Dark</div>
  <div class="badge bg-slate-150 text-slate-800">Light</div>

Rounded Badge

Code

Badges can have a rounded shape. To do this, you should use the rounded-full utility Check out code for detail of usage.

Default

Primary

Secondary

Info

Success

Warning

Error

Dark

Light

                
  <div
    class="badge rounded-full bg-slate-150 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
  >
    Default
  </div>
  <div class="badge rounded-full bg-primary text-white dark:bg-accent">
    Primary
  </div>
  <div class="badge rounded-full bg-secondary text-white">Secondary</div>
  <div class="badge rounded-full bg-info text-white">Info</div>
  <div class="badge rounded-full bg-success text-white">Success</div>
  <div class="badge rounded-full bg-warning text-white">Warning</div>
  <div class="badge rounded-full bg-error text-white">Error</div>
  <div class="badge rounded-full bg-navy-700 text-white dark:bg-navy-900">
    Dark
  </div>
  <div class="badge rounded-full bg-slate-150 text-slate-800">Light</div>

Glow Badge

Code

Badges can be glow. To do this, you should use colored shadows. Check out code for detail of usage.

Default

Primary

Secondary

Info

Success

Warning

Error

                
  <div
    class="badge bg-slate-150 text-slate-800 shadow-soft shadow-slate-200/50 dark:bg-navy-500 dark:text-navy-100 dark:shadow-navy-450/50"
  >
    Default
  </div>
  <div
    class="badge bg-primary text-white shadow-soft shadow-primary/50 dark:bg-accent dark:shadow-accent/50"
  >
    Primary
  </div>
  <div class="badge bg-secondary text-white shadow-soft shadow-secondary/50">
    Secondary
  </div>
  <div class="badge bg-info text-white shadow-soft shadow-info/50">Info</div>
  <div class="badge bg-success text-white shadow-soft shadow-success/50">
    Success
  </div>
  <div class="badge bg-warning text-white shadow-soft shadow-warning/50">
    Warning
  </div>
  <div class="badge bg-error text-white shadow-soft shadow-error/50">Error</div>

Soft Color Badge

Code

Badges can have a soft colors. To do this, you should use some opacity. Check out code for detail of usage.

Primary

Secondary

Info

Success

Warning

Error

                
  <div
    class="badge bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
  >
    Primary
  </div>
  <div
    class="badge bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light"
  >
    Secondary
  </div>
  <div class="badge bg-info/10 text-info dark:bg-info/15">Info</div>
  <div class="badge bg-success/10 text-success dark:bg-success/15">Success</div>
  <div class="badge bg-warning/10 text-warning dark:bg-warning/15">Warning</div>
  <div class="badge bg-error/10 text-error dark:bg-error/15">Error</div>

Outlined Badge

Code

Badges can be outlied. Check out code for detail of usage.

Default

Primary

Secondary

Info

Success

Warning

Error

                
  <div
    class="badge rounded-full border border-slate-300 text-slate-800 dark:border-navy-450 dark:text-navy-50"
  >
    Default
  </div>
  <div
    class="badge rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
  >
    Primary
  </div>
  <div
    class="badge rounded-full border border-secondary text-secondary dark:border-secondary-light dark:text-secondary-light"
  >
    Secondary
  </div>
  <div class="badge rounded-full border border-info text-info">Info</div>
  <div class="badge rounded-full border border-success text-success">
    Success
  </div>
  <div class="badge rounded-full border border-warning text-warning">
    Warning
  </div>
  <div class="badge rounded-full border border-error text-error">Error</div>

Badge With Dots

Code

Badges can be a dot attached to it. Check out code for detail of usage.

Default

Primary

Info

Success

Warning

Error

                
  <div class="badge  space-x-reverse space-x-2.5 text-slate-800 dark:text-navy-100">
    <div class="size-2 rounded-full bg-current"></div>
    <span>Default</span>
  </div>
  <div class="badge  space-x-reverse space-x-2.5 text-primary dark:text-accent-light">
    <div class="size-2 rounded-full bg-current"></div>
    <span>Primary</span>
  </div>
  <div class="badge  space-x-reverse space-x-2.5 text-secondary dark:text-secondary-light">
    <div class="size-2 rounded-full bg-current"></div>
    <span>Primary</span>
  </div>
  <div class="badge  space-x-reverse space-x-2.5 text-info">
    <div class="size-2 rounded-full bg-current"></div>
    <span>Info</span>
  </div>
  <div class="badge  space-x-reverse space-x-2.5 text-success">
    <div class="size-2 rounded-full bg-current"></div>
    <span>Success</span>
  </div>
  <div class="badge  space-x-reverse space-x-2.5 text-warning">
    <div class="size-2 rounded-full bg-current"></div>
    <span>Warning</span>
  </div>
  <div class="badge  space-x-reverse space-x-2.5 text-error">
    <div class="size-2 rounded-full bg-current"></div>
    <span>Error</span>
  </div>

Badge With Dots

Code

Badges can have a soft colors and a dot attached to it. Check out code for detail of usage.

Primary

Info

Success

Warning

Error

                
  <div
    class="badge  space-x-reverse space-x-2.5 rounded-full bg-primary/10 text-primary dark:bg-accent-light/15 dark:text-accent-light"
  >
    <div class="size-2 rounded-full bg-current"></div>
    <span>Primary</span>
  </div>
  <div
    class="badge  space-x-reverse space-x-2.5 rounded-full bg-secondary/10 text-secondary dark:bg-secondary-light/15 dark:text-secondary-light"
  >
    <div class="size-2 rounded-full bg-current"></div>
    <span>Primary</span>
  </div>
  <div
    class="badge  space-x-reverse space-x-2.5 rounded-full bg-info/10 text-info dark:bg-info/15"
  >
    <div class="size-2 rounded-full bg-current"></div>
    <span>Info</span>
  </div>
  <div
    class="badge  space-x-reverse space-x-2.5 rounded-full bg-success/10 text-success dark:bg-success/15"
  >
    <div class="size-2 rounded-full bg-current"></div>
    <span>Success</span>
  </div>
  <div
    class="badge  space-x-reverse space-x-2.5 rounded-full bg-warning/10 text-warning dark:bg-warning/15"
  >
    <div class="size-2 rounded-full bg-current"></div>
    <span>Warning</span>
  </div>
  <div
    class="badge  space-x-reverse space-x-2.5 rounded-full bg-error/10 text-error dark:bg-error/15"
  >
    <div class="size-2 rounded-full bg-current"></div>
    <span>Error</span>
  </div>

Badge With Icon

Code

Badges can have an icon. Badges components work well with FontAwesome and Heroicon Icons. Check out code for detail of usage.

Default

Primary

Secondary

Warning

Remove

                
  <div
    class="badge  space-x-reverse space-x-2 bg-slate-150 text-slate-800 dark:bg-navy-500 dark:text-navy-100"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="size-4"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z"
        clip-rule="evenodd"
      ></path>
    </svg>
    <span>Default</span>
  </div>
  <div class="badge  space-x-reverse space-x-2 bg-primary text-white dark:bg-accent">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="size-4"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
      ></path>
    </svg>
    <span>Primary</span>
  </div>
  <div class="badge  space-x-reverse space-x-2 bg-secondary text-white">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="size-4"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z"
        clip-rule="evenodd"
      ></path>
    </svg>
    <span>Secondary</span>
  </div>
  <div class="badge rounded-full bg-info text-white">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="size-4"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16h-8z"
      ></path>
    </svg>
  </div>
  <div class="badge bg-success text-white">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="size-4"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z"
        clip-rule="evenodd"
      ></path>
    </svg>
  </div>
  <div
    class="badge  space-x-reverse space-x-2 bg-warning text-white shadow-soft shadow-warning/50"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-4 w-5"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path
        fill-rule="evenodd"
        d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
        clip-rule="evenodd"
      />
    </svg>
    <span>Warning</span>
  </div>
  <div class="badge  space-x-reverse space-x-2 bg-error text-white">
    <span>Remove</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="size-4"
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
    >
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M6 18L18 6M6 6l12 12"
      />
    </svg>
  </div>

Profile

Messages

Team

Activity

Settings

Notifications

Banking cards

Pinned Apps

Stock Market

BTC

SOL

Latest News

Settings

Badge

Badge

Rounded Badge

Glow Badge

Soft Color Badge

Outlined Badge

Badge With Dots

Badge With Dots

Badge With Icon