Logo

Geekaxon

Welcome User

  • Light Mode Dark Mode Mix Mode
Logo

Geekaxon

General Badges

Theme Primary Success Info Warning Danger Light Dark 
<span class='badge'>Badge</span>
:root{
    --light-badge-background-color: #fff;
    --light-badge-text-color: #535353;
    --light-primary: #6562fb;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-text-color: #fff;
}
.badge {
    font-size: 11.998px;
    line-height: 11.998px;
    background-color: var(--light-badge-background-color);
    color: var(--light-badge-text-color);
}
.badge.text-bg-primary {
    background-color: var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.badge.text-bg-success {
    background-color: var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.badge.text-bg-info {
    background-color: var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.badge.text-bg-warning {
    background-color: var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.badge.text-bg-danger {
    background-color: var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.badge.text-bg-light {
    background-color: var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.badge.text-bg-dark {
    background-color: var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to apply various background colors to your badge component for different contexts or themes.

  • text-bg-primary: Applies the theme's primary color.
  • text-bg-success: Applies a green background.
  • text-bg-info: Applies a light blue background.
  • text-bg-warning: Applies a yellow background.
  • text-bg-danger: Applies a red background.
  • text-bg-light: Applies a white background.
  • text-bg-dark: Applies a dark background.

Rounded Badges

Theme Primary Success Info Warning Danger Light Dark 
<span class='badge rounded-pill'>Rounded Badge</span>
:root{
    --light-badge-background-color: #fff;
    --light-badge-text-color: #535353;
    --light-primary: #6562fb;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-text-color: #fff;
}
.badge {
    font-size: 11.998px;
    line-height: 11.998px;
    background-color: var(--light-badge-background-color);
    color: var(--light-badge-text-color);
}
.badge.text-bg-primary {
    background-color: var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.badge.text-bg-success {
    background-color: var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.badge.text-bg-info {
    background-color: var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.badge.text-bg-warning {
    background-color: var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.badge.text-bg-danger {
    background-color: var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.badge.text-bg-light {
    background-color: var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.badge.text-bg-dark {
    background-color: var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

These classes allow you to create badges with a rounded or pill shape, along with customizable background colors.

Background Color Options:

  • text-bg-primary: Applies the theme’s primary color.
  • text-bg-success: Green background for success states.
  • text-bg-info: Light blue background for informational tags.
  • text-bg-warning: Yellow background for warning or caution.
  • text-bg-danger: Red background for error or danger alerts.
  • text-bg-light: White or light background for a clean look.
  • text-bg-dark: Dark background for a bold and modern style.

Shape Option:

  • rounded-pill: Makes the badge fully rounded, giving it a pill-like appearance for a smooth, modern look.

These classes help you create visually appealing, rounded badges that can be used for notifications, labels, or other UI elements.

Glow Badges

Theme Primary Success Info Warning Danger Light Dark 
<span class='badge glow'>Glowing Badge</span>
:root{
    --light-badge-background-color: #fff;
    --light-badge-text-color: #535353;
    --light-badge-glow-color: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-primary: #6562fb;
    --light-primary-glow: rgba(101, 98, 251, 0.6) 0 0 5px 1px;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-glow: rgba(0, 170, 68, 0.5) 0 0 5px 1px;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-glow: rgba(6, 185, 239, 0.5) 0 0 5px 1px;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-glow: rgba(255, 150, 11, 0.6) 0 0 5px 1px;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-glow: rgba(255, 76, 76, 0.6) 0 0 5px 1px;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-glow: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-glow: rgba(99, 99, 99, 0.5) 0 0 5px 1px;
    --light-dark-1-text-color: #fff;
}
.badge {
    font-size: 11.998px;
    line-height: 11.998px;
    background-color: var(--light-badge-background-color);
    color: var(--light-badge-text-color);
}
.badge.glow {
    -webkit-box-shadow: var(--light-badge-glow-color);
    box-shadow: var(--light-badge-glow-color);
}
.badge.text-bg-primary {
    background-color: var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.badge.text-bg-primary.glow {
    -webkit-box-shadow: var(--light-primary-glow) !important;
    box-shadow: var(--light-primary-glow) !important;
}
.badge.text-bg-success {
    background-color: var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.badge.text-bg-success.glow {
    -webkit-box-shadow: var(--light-success-1-glow) !important;
    box-shadow: var(--light-success-1-glow) !important;
}
.badge.text-bg-info {
    background-color: var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.badge.text-bg-info.glow {
    -webkit-box-shadow: var(--light-info-1-glow) !important;
    box-shadow: var(--light-info-1-glow) !important;
}
.badge.text-bg-warning {
    background-color: var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.badge.text-bg-warning.glow {
    -webkit-box-shadow: var(--light-warning-1-glow) !important;
    box-shadow: var(--light-warning-1-glow) !important;
}
.badge.text-bg-danger {
    background-color: var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.badge.text-bg-danger.glow {
    -webkit-box-shadow: var(--light-danger-1-glow) !important;
box-shadow: var(--light-danger-1-glow) !important;
}
.badge.text-bg-light {
    background-color: var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.badge.text-bg-light.glow {
    -webkit-box-shadow: var(--light-light-1-glow) !important;
    box-shadow: var(--light-light-1-glow) !important;
}
.badge.text-bg-dark {
    background-color: var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
.badge.text-bg-dark.glow {
    -webkit-box-shadow: var(--light-dark-1-glow) !important;
    box-shadow: var(--light-dark-1-glow) !important;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

These classes allow you to create badges with a glowing effect, along with customizable background colors, rounded shape, and glow styling.

Background Color Options:

  • text-bg-primary: Applies the theme’s primary color.
  • text-bg-success: Green background for success states.
  • text-bg-info: Light blue background for informational tags.
  • text-bg-warning: Yellow background for warning or caution.
  • text-bg-danger: Red background for error or danger alerts.
  • text-bg-light: White or light background for a clean look.
  • text-bg-dark: Dark background for a bold and modern style.

Glow Effect:

  • glow: Adds a subtle glowing effect to the badge for enhanced visibility and emphasis.

Shape Option:

  • rounded-pill: Makes the badge fully rounded, giving it a pill-like appearance for a smooth, modern look.

These classes allow you to create glowing, rounded badges for enhanced UI elements like notifications or tags.

Badge Sizes

Extra Large Badge Large Badge Normal Badge Small Badge Tiny Badge 
<span class='badge'>Badge</span>
:root{
    --light-badge-background-color: #fff;
    --light-badge-text-color: #535353;
    --light-badge-glow-color: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-primary: #6562fb;
    --light-primary-glow: rgba(101, 98, 251, 0.6) 0 0 5px 1px;
    --light-primary-text-color: #fff;
    --light-success-1: #00aa44;
    --light-success-1-glow: rgba(0, 170, 68, 0.5) 0 0 5px 1px;
    --light-success-1-text-color: #fff;
    --light-info-1: #06b9ef;
    --light-info-1-glow: rgba(6, 185, 239, 0.5) 0 0 5px 1px;
    --light-info-1-text-color: #fff;
    --light-warning-1: #ff960b;
    --light-warning-1-glow: rgba(255, 150, 11, 0.6) 0 0 5px 1px;
    --light-warning-1-text-color: #fff;
    --light-danger-1: #f93131;
    --light-danger-1-glow: rgba(255, 76, 76, 0.6) 0 0 5px 1px;
    --light-danger-1-text-color: #fff;
    --light-light-1: #fff;
    --light-light-1-glow: rgba(211, 212, 213, 0.7) 0 0 5px 1px;
    --light-light-1-text-color: #363636;
    --light-dark-1: #21242b;
    --light-dark-1-glow: rgba(99, 99, 99, 0.5) 0 0 5px 1px;
    --light-dark-1-text-color: #fff;
}
.badge {
    font-size: 11.998px;
    line-height: 11.998px;
    background-color: var(--light-badge-background-color);
    color: var(--light-badge-text-color);
}
.badge.glow {
    -webkit-box-shadow: var(--light-badge-glow-color);
    box-shadow: var(--light-badge-glow-color);
}
.badge.text-bg-primary {
    background-color: var(--light-primary) !important;
    color: var(--light-primary-text-color) !important;
}
.badge.text-bg-primary.glow {
    -webkit-box-shadow: var(--light-primary-glow) !important;
    box-shadow: var(--light-primary-glow) !important;
}
.badge.text-bg-success {
    background-color: var(--light-success-1) !important;
    color: var(--light-success-1-text-color) !important;
}
.badge.text-bg-success.glow {
    -webkit-box-shadow: var(--light-success-1-glow) !important;
    box-shadow: var(--light-success-1-glow) !important;
}
.badge.text-bg-info {
    background-color: var(--light-info-1) !important;
    color: var(--light-info-1-text-color) !important;
}
.badge.text-bg-info.glow {
    -webkit-box-shadow: var(--light-info-1-glow) !important;
    box-shadow: var(--light-info-1-glow) !important;
}
.badge.text-bg-warning {
    background-color: var(--light-warning-1) !important;
    color: var(--light-warning-1-text-color) !important;
}
.badge.text-bg-warning.glow {
    -webkit-box-shadow: var(--light-warning-1-glow) !important;
    box-shadow: var(--light-warning-1-glow) !important;
}
.badge.text-bg-danger {
    background-color: var(--light-danger-1) !important;
    color: var(--light-danger-1-text-color) !important;
}
.badge.text-bg-danger.glow {
    -webkit-box-shadow: var(--light-danger-1-glow) !important;
    box-shadow: var(--light-danger-1-glow) !important;
}
.badge.text-bg-light {
    background-color: var(--light-light-1) !important;
    color: var(--light-light-1-text-color) !important;
}
.badge.text-bg-light.glow {
    -webkit-box-shadow: var(--light-light-1-glow) !important;
    box-shadow: var(--light-light-1-glow) !important;
}
.badge.text-bg-dark {
    background-color: var(--light-dark-1) !important;
    color: var(--light-dark-1-text-color) !important;
}
.badge.text-bg-dark.glow {
    -webkit-box-shadow: var(--light-dark-1-glow) !important;
    box-shadow: var(--light-dark-1-glow) !important;
}
.badge.badge-xl {
    font-size: 15.68px;
    line-height: 15.68px;
}
.badge.badge-lg {
    font-size: 14px;
    line-height: 14px;
}
.badge.badge-sm {
    font-size: 10.5px;
    line-height: 10.5px;
}
.badge.badge-xsm {
    font-size: 9.52px;
    line-height: 9.52px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Customize badges with various sizes, colors, shapes, and glowing effects using these classes.

Background Color Options:

  • text-bg-primary: Applies the theme’s primary color.
  • text-bg-success: Green background for success states.
  • text-bg-info: Light blue background for informational tags.
  • text-bg-warning: Yellow background for warning or caution.
  • text-bg-danger: Red background for error or danger alerts.
  • text-bg-light: White or light background for a clean look.
  • text-bg-dark: Dark background for a bold and modern style.

Glow Effect:

  • glow: Adds a subtle glowing effect to the badge for enhanced visibility and emphasis.

Shape Option:

  • rounded-pill: Makes the badge fully rounded, giving it a pill-like appearance for a smooth, modern look.

Size Options:

  • badge-xl: Extra-large badge for a more prominent and eye-catching look.
  • badge-lg: Large badge for better visibility.
  • Normal: Default size if no size class is applied.
  • badge-sm: Small badge for compact and subtle displays.
  • badge-xsm: Extra-small badge for minimal and unobtrusive labels.

These classes provide flexibility in badge design, allowing developers to choose sizes, shapes, colors, and glowing effects for various UI needs.