CSS-Only Badge Component


Add the class name `badge` to your span or other element.
All CSS variables are prefixed with `--badge-`

by Jane Ori
GitHub
NPM


--badge-color: default | primary | secondary | info | success | warn | error

Specify the color variant of the badge.
Default: default
examples:
--badge-color: default; CSS Badge
--badge-color: primary; CSS Badge
--badge-color: secondary; CSS Badge
--badge-color: info; CSS Badge
--badge-color: success; CSS Badge
--badge-color: warn; CSS Badge
--badge-color: error; CSS Badge

--badge-size: xs|sm|md|lg|xl

Default: md
example:
--badge-size: lg;

CSS Badge CSS Badge CSS Badge CSS Badge CSS Badge

--badge-pad: xs|sm|md|lg|xl

Default: var(--badge-size, md)

CSS Badge CSS Badge CSS Badge CSS Badge CSS Badge

--badge-pad-block: <number>

A scalar value that (typically) reduces the top and bottom padding relative to the left and right padding.
Default: 0.25
example:
--badge-pad-block: 1;

CSS Badge CSS Badge CSS Badge CSS Badge CSS Badge

--badge-font: xs|sm|md|lg|xl

Default: var(--badge-size, md)

CSS Badge CSS Badge CSS Badge CSS Badge CSS Badge

--badge-icon: <image>

Default: none
example:
--badge-icon: url(https://picsum.photos/200);

CSS Badge CSS Badge CSS Badge CSS Badge CSS Badge

--badge-icon-color: <color>

Default: none
example:
--badge-icon-color: rebeccapurple;

CSS Badge CSS Badge CSS Badge CSS Badge CSS Badge

--badge-icon-shape: square|rounded|circle

Default: rounded
example:
--badge-icon-color: rebeccapurple;
--badge-icon-shape: circle;

CSS Badge CSS Badge CSS Badge CSS Badge CSS Badge

example
--badge-icon: url(https://picsum.photos/64);
--badge-icon-shape: square;

CSS Badge CSS Badge CSS Badge CSS Badge CSS Badge

--badge-icon-position: top|right|bottom|left

Default: left
example:
--badge-icon-color: rebeccapurple;
--badge-icon-position: top;

CSS Badge CSS Badge CSS Badge CSS Badge CSS Badge

example
--badge-icon: url(https://picsum.photos/64);
--badge-icon-position: bottom;
--badge-icon-shape: circle;

CSS Badge CSS Badge CSS Badge CSS Badge CSS Badge

example
--badge-icon: url(https://picsum.photos/64);
--badge-icon-position: right;
--badge-icon-shape: circle;

CSS Badge CSS Badge CSS Badge CSS Badge CSS Badge

Defining the meaning of color variants "primary", "success", etc

Here are the color variant properties and their defaults, which are largely copied from bootstrap's default colors:
CSS Badge
--badge-color-default: black;
--badge-background-default: rgb(222, 222, 222);

CSS Badge
--badge-color-primary: white;
--badge-background-primary: rgb(13, 110, 253);

CSS Badge
--badge-color-secondary: white;
--badge-background-secondary: rgb(108, 117, 125);

CSS Badge
--badge-color-info: black;
--badge-background-info: rgb(13, 202, 240);

CSS Badge
--badge-color-success: white;
--badge-background-success: rgb(25, 135, 84);

CSS Badge
--badge-color-warn: black;
--badge-background-warn: rgb(255, 193, 7);

CSS Badge
--badge-color-error: white;
--badge-background-error: rgb(220, 53, 69);

You can override these for an individual instance, set them with a `.badge { ... }` rule globally, or override them in groups with any other selector targeting groups of .badge components.

Defining the meaning of "sm", "md", etc

Here are the sized properties and their defaults:
--badge-pad-xs: 4px;
--badge-pad-sm: 8px;
--badge-pad-md: 12px;
--badge-pad-lg: 16px;
--badge-pad-xl: 20px;

--badge-font-xs: 0.75rem;
--badge-font-sm: 0.875rem;
--badge-font-md: 1rem;
--badge-font-lg: 1.125rem;
--badge-font-xl: 1.25rem;
You can override these for an individual instance, set them with a `.badge { ... }` rule globally, or override them in groups with any other selector targeting groups of .badge components.

Override the opacity, font-family, border, etc

This is just CSS so override other settings with standard CSS properties.
example:
opacity: 0.75;
font-family: monospace;
border: 1px solid black;

CSS Badge CSS Badge CSS Badge CSS Badge CSS Badge