Badge

radius.md — el mismo radio que campos, menús y OrbitToast (no el radius.full pill que usan botón/switch/avatar). Fondo intent.background plano y claro, texto text.inverse — sin borde, sin sombra, el mismo tratamiento que OrbitToast. success/error reutilizan exactamente los mismos tokens que usa OrbitToast (color.toast-success/color.toast-error).

Pasá removable (web) / onRemove (Kotlin) y se convierte en un tag removible — mismos tokens, mismo componente, solo se agrega una ”×” (el ícono plus rotado 45° — el catálogo cerrado de Orbit no tiene un glyph de cerrar dedicado).

Uso

Web

<orbit-badge label="Success" intent="success"></orbit-badge>
<orbit-badge label="Warning" intent="warning"></orbit-badge>
<orbit-badge label="Error" intent="error"></orbit-badge>
<orbit-badge label="Info" intent="info"></orbit-badge>
<orbit-badge label="Neutral" intent="neutral"></orbit-badge>

Compose Multiplatform

OrbitBadge(label = "Success", intent = OrbitIntent.Success)
OrbitBadge(label = "Warning", intent = OrbitIntent.Warning)
OrbitBadge(label = "Error", intent = OrbitIntent.Error)
OrbitBadge(label = "Info", intent = OrbitIntent.Info)
OrbitBadge(label = "Neutral", intent = OrbitIntent.Neutral)

Tamaños

Escala cerrada (xs..xl, mismo patrón que OrbitButton) — se propaga igual sin importar el intent; acá una fila por color para verlos todos.

xs

sm

md

lg

xl

xs

sm

md

lg

xl

xs

sm

md

lg

xl

xs

sm

md

lg

xl

xs

sm

md

lg

xl

Web

<orbit-badge label="Success" intent="success" size="xs"></orbit-badge>
<!-- xs | sm | md | lg | xl -->

Compose Multiplatform

OrbitBadge(
    label = "Success",
    intent = OrbitIntent.Success,
    size = OrbitBadgeSize.Xs,
)
// Xs | Sm | Md | Lg | Xl

Removible (tag)

size también se propaga acá — el ícono de quitar escala junto con el resto.

xs

sm

md

lg

xl

Web

<orbit-badge label="kotlin" intent="info" size="lg" removable></orbit-badge>
<script>
  document
    .querySelector('orbit-badge')
    .addEventListener('orbit-remove', () => {
      /* quitar el tag */
    });
</script>

Compose Multiplatform

OrbitBadge(
    label = "kotlin",
    intent = OrbitIntent.Info,
    size = OrbitBadgeSize.Lg,
    onRemove = { /* quitar el tag */ },
)

Props

Prop	Tipo	Default	Descripción
label	string	—	Texto del badge.
intent	OrbitIntent (Kotlin) / "success" | "warning" | "error" | "info" | "neutral" (web)	Neutral / "neutral"	Set cerrado de cinco. success/error comparten paleta con OrbitToast; warning/info/neutral tienen sus propios tokens claros.
size	OrbitBadgeSize (Kotlin) / "xs" | "sm" | "md" | "lg" | "xl" (web)	Md / "md"	Tamaño — mismo patrón que OrbitButton.
onRemove (Kotlin) / attr removable + evento orbit-remove (web)	(() -> Unit)?	null	Si está presente, agrega el botón de quitar.