Badge

Source

• Badge.css

Example

<div class="x-badge">Badge</div>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/badge/props/default.css" layer(theme);
@import "winduum/src/components/badge/bordered.css" layer(utilities);
@import "winduum/src/components/badge/circle.css" layer(utilities);
@import "winduum/src/components/badge/default.css" layer(utilities);
@import "winduum/src/components/badge/lg.css" layer(utilities);
@import "winduum/src/components/badge/muted.css" layer(utilities);
@import "winduum/src/components/badge/sm.css" layer(utilities);
@import "winduum/src/components/badge/square.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-badge-border-width: 1px;
    --x-badge-border-radius: var(--radius-md);
  }
}

Winduum CSS Code

winduum/src/components/badge/props/default.css

:root, :host {
  --x-badge-border-width: 0px;
  --x-badge-border-radius: var(--radius-lg);
  --x-badge-font-size: var(--text-xs);
  --x-badge-gap: calc(var(--spacing) * 1);
  --x-badge-block-size: 1.5rem;
  --x-badge-padding-block: 0;
  --x-badge-padding-inline: 0.5rem;
}

winduum/src/components/badge/bordered.css

.x-badge:is(.bordered) {
  --x-badge-border-width: 1px;
  --x-badge-border-color-opacity: 100%;
  --x-badge-background-color-opacity: 0%;
  --x-badge-color: var(--color-accent);
}

winduum/src/components/badge/circle.css

.x-badge:is(.circle) {
  --x-badge-padding-inline: var(--x-badge-padding-block);
  --x-badge-inline-size: var(--x-badge-block-size);
  --x-badge-border-radius: var(--radius-full);
}

winduum/src/components/badge/default.css

.x-badge {
  --x-badge-background-color: var(--color-accent);
  --x-badge-border-color: var(--color-accent);
  --x-badge-color: var(--color-accent-foreground);

  inline-size: var(--x-badge-inline-size);
  block-size: var(--x-badge-block-size);
  padding: var(--x-badge-padding-block) var(--x-badge-padding-inline);
  padding-inline: calc(var(--x-badge-padding-inline) - var(--x-badge-border-width));
  border-radius: var(--x-badge-border-radius);
  font-family: var(--x-badge-font-family);
  font-weight: var(--x-badge-font-weight);
  font-size: var(--x-badge-font-size);
  letter-spacing: var(--x-badge-letter-spacing);
  background-color:
    color-mix(
      in var(--x-badge-background-color-space, srgb),
      var(--x-badge-background-color) var(--x-badge-background-color-opacity, 100%),
      var(--x-badge-background-color-mix, transparent)
    );
  color:
    color-mix(
      in var(--x-badge-color-space, srgb),
      var(--x-badge-color) var(--x-badge-color-opacity, 100%),
      var(--x-badge-color-mix, transparent)
    );
  border:
    var(--x-badge-border-width)
    solid
    color-mix(
      in var(--x-badge-border-color-space, srgb),
      var(--x-badge-border-color) var(--x-badge-border-color-opacity, 100%),
      var(--x-badge-border-color-mix, transparent)
    );
  gap: var(--x-badge-gap);
  display: inline-flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

winduum/src/components/badge/lg.css

.x-badge:is(.lg) {
  --x-badge-block-size: 1.75rem;
}

winduum/src/components/badge/muted.css

.x-badge:is(.muted) {
  --x-badge-color: var(--color-accent);
  --x-badge-background-color-opacity: 10%;
}

winduum/src/components/badge/sm.css

.x-badge:is(.sm) {
  --x-badge-block-size: 1.25rem;
  --x-badge-font-size: var(--text-xs);
}

winduum/src/components/badge/square.css

.x-badge:is(.square) {
  --x-badge-padding-inline: var(--x-badge-padding-block);
  --x-badge-inline-size: var(--x-badge-block-size);
}