Badge

<oblyx-badge> is a small status or category label. It has two independent axes, variant for semantic status and color for a non-semantic categorical hue, and a badge only ever renders one of them: when color is set, it wins outright and variant is ignored.

<oblyx-badge>Draft</oblyx-badge>

oblyxBadge { +"Draft" }

Variant

Five semantic values, each a solid background with a matching text color: neutral is the default, and info, success, warning, and error read as status. Reach for variant when the badge is telling the reader something about state, such as a record's workflow stage.

<oblyx-badge variant="neutral">Draft</oblyx-badge>
<oblyx-badge variant="info">In review</oblyx-badge>
<oblyx-badge variant="success">Published</oblyx-badge>
<oblyx-badge variant="warning">Expiring</oblyx-badge>
<oblyx-badge variant="error">Failed</oblyx-badge>

oblyxBadge(variant = OblyxBadgeVariant.NEUTRAL) { +"Draft" }
oblyxBadge(variant = OblyxBadgeVariant.INFO) { +"In review" }
oblyxBadge(variant = OblyxBadgeVariant.SUCCESS) { +"Published" }
oblyxBadge(variant = OblyxBadgeVariant.WARNING) { +"Expiring" }
oblyxBadge(variant = OblyxBadgeVariant.ERROR) { +"Failed" }

Color

Ten non-semantic hues, each a tinted background with hue-matched text: blue, cyan, gray, green, orange, pink, purple, red, teal, and yellow. Reach for color when a badge labels a category a user picks, such as a project or tag color, rather than a status.

This ten-value set is not currently promised stable across library versions: a future release could add, remove, or rename a color. If a consumer persists a user's chosen color, for example in a database column, that instability is the fact to weigh before doing so, not an edge case to discover later: a value saved today is not guaranteed to still be a valid OblyxStandardColor member after an upgrade, and the generated fromAttributeValue throws rather than silently falling back to a default when a stored value no longer matches. This is the same enum Kotlin uses for any other component's non-semantic color attribute, not something specific to badge.

Because a consumer is more likely to offer every color as a choice than to hardcode one, the real use case is iterating OblyxStandardColor.entries to build a picker, not listing values by hand.

<oblyx-badge color="blue">Blue</oblyx-badge>
<oblyx-badge color="cyan">Cyan</oblyx-badge>
<oblyx-badge color="gray">Gray</oblyx-badge>
<oblyx-badge color="green">Green</oblyx-badge>
<oblyx-badge color="orange">Orange</oblyx-badge>
<oblyx-badge color="pink">Pink</oblyx-badge>
<oblyx-badge color="purple">Purple</oblyx-badge>
<oblyx-badge color="red">Red</oblyx-badge>
<oblyx-badge color="teal">Teal</oblyx-badge>
<oblyx-badge color="yellow">Yellow</oblyx-badge>

// A color picker: build one badge per available color, rather than
// listing the ten values by hand. This is the real reason the enum
// exists, so iterate it instead of hardcoding each member.
div {
  for (color in OblyxStandardColor.entries) {
    oblyxBadge(color = color) { +color.attributeValue.replaceFirstChar { it.uppercase() } }
  }
}

Icon

icon is an optional glyph shown before the label, resolved against the same registry <oblyx-icon> uses. A badge has no default icon: omit it for a text-only badge.

<oblyx-badge variant="success" icon="check">Verified</oblyx-badge>

oblyxBadge(variant = OblyxBadgeVariant.SUCCESS, icon = OblyxIconName.CHECK) { +"Verified" }

Setting both variant and color

There is no defined meaning for combining the two axes, and no real call site does. Setting a non-neutral variant together with color is very likely a mistake, so it is flagged loudly: color still wins and renders, but the element logs a console warning naming both values, rather than silently discarding the ignored one with no trace.

<oblyx-badge variant="error" color="blue">Logs a console warning</oblyx-badge>

oblyxBadge(variant = OblyxBadgeVariant.ERROR, color = OblyxStandardColor.BLUE) {
  +"Logs a console warning"
}

Reference