Badge-Colors

.badges .badges .badges-gray .badges .badges-error .badges .badges-warning .badges .badges-success

Copy

Edit

/* scss/badgess/_badges-Colors.scss */ .badges { @extend .text-sm; @extend .weight-m; padding: 2px 10px; border: 0; border-radius: 1rem; background-color: $primary-50; color: $primary-700; display: inline-flex; align-items: center; text-decoration: none; &:hover { text-decoration: none; color: $primary-700; } // badges colors &.badges-gray { background-color: $gray-100; color: $gray-700; &:hover { color: $gray-700; } } &.badges-error { background-color: $error-50; color: $error-700; &:hover { color: $error-700; } } &.badges-warning { background-color: $warning-50; color: $warning-700; &:hover { color: $warning-700; } } &.badges-success { background-color: $success-50; color: $success-700; &:hover { color: $success-700; } } // badges sizes &.badges-lg { padding: 4px 12px; } // badges with icon i { font-size: 12px; &.close-banner { cursor: pointer; } } }

Badge-Sizes

.badges .badges .badges-lg

Badge-with-icon

.badges .badges .badges

Badges