OrbitButton

Botón principal — estilado 100% desde color.button-primary.* y space.* de design-tokens, nunca con colores/tamaños hardcodeados. En web es un custom element real con Shadow DOM (<orbit-button>, no un <a>/<button> con clase); en Kotlin, el composable OrbitButton. Ver la guía de instalación para Compose Multiplatform o Web.

Uso

Descargar DragBuilder

Web

<orbit-button href="/download" size="md">Descargar</orbit-button>

Compose Multiplatform

OrbitButton(text = "Descargar", onClick = { /* ... */ }, size = OrbitButtonSize.Md)

Variantes

Cada variante lee su propio set color.button-<variante>.* de design-tokens — no hay colores derivados/compartidos entre variantes.

Primaryprimary

Secondarysecondary

Lightlight

Ghostghost

Destructivedestructive

Web

<orbit-button variant="primary">Primary</orbit-button>
<orbit-button variant="secondary">Secondary</orbit-button>
<orbit-button variant="light">Light</orbit-button>
<orbit-button variant="ghost">Ghost</orbit-button>
<orbit-button variant="destructive">Destructive</orbit-button>

Compose Multiplatform

OrbitButton(text = "Primary", onClick = { /* ... */ }, variant = OrbitButtonVariant.Primary)
OrbitButton(text = "Secondary", onClick = { /* ... */ }, variant = OrbitButtonVariant.Secondary)
OrbitButton(text = "Light", onClick = { /* ... */ }, variant = OrbitButtonVariant.Light)
OrbitButton(text = "Ghost", onClick = { /* ... */ }, variant = OrbitButtonVariant.Ghost)
OrbitButton(text = "Destructive", onClick = { /* ... */ }, variant = OrbitButtonVariant.Destructive)

Ghost es la variante para acciones secundarias de bajo énfasis (ej. “Cancelar” al lado de un CTA primario) — sin fondo, solo texto; en hover toma el mismo fondo que surface.background-secondary con texto lima. Destructive es para acciones irreversibles (ej. “Eliminar”) — fondo rojo sólido, no comparte color con ninguna otra variante.

Tamaños

XSxs

SMsm

MDmd

LGlg

XLxl

Web

<orbit-button size="xs">XS</orbit-button>
<!-- xs | sm | md | lg | xl -->

Compose Multiplatform

OrbitButton(text = "XS", onClick = { /* ... */ }, size = OrbitButtonSize.Xs)
// Xs | Sm | Md | Lg | Xl

Íconos

leading-icon/trailing-icon (web) y leadingIcon/trailingIcon (Kotlin) solo aceptan un nombre del catálogo propio de Orbit — no Font Awesome, no SVG arbitrario, no ImageVector cualquiera. Es a propósito: Font Awesome es 100% web (en Compose Desktop/Android/iOS no hay nada que cargar), así que “cualquier ícono” nunca podía ser el mismo ejemplo en las dos plataformas. Con el catálogo cerrado, mismo nombre, misma forma en ambos lados. Hoy son cuatro — sparkles, arrow-right, download, plus — se agregan de a uno según haga falta, siempre en las dos plataformas a la vez.

Crear con IAsparkles

Try it in your browserarrow-right

Descargardownload

Nuevo proyectoplus

Web

<orbit-button leading-icon="sparkles">Crear con IA</orbit-button>
<orbit-button trailing-icon="arrow-right">Try it in your browser</orbit-button>
<orbit-button leading-icon="download">Descargar</orbit-button>
<orbit-button variant="light" leading-icon="plus">Nuevo proyecto</orbit-button>

Compose Multiplatform

OrbitButton(text = "Crear con IA", onClick = { /* ... */ }, leadingIcon = OrbitIcon.Sparkles)
OrbitButton(text = "Try it in your browser", onClick = { /* ... */ }, trailingIcon = OrbitIcon.ArrowRight)
OrbitButton(text = "Descargar", onClick = { /* ... */ }, leadingIcon = OrbitIcon.Download)
OrbitButton(text = "Nuevo proyecto", onClick = { /* ... */ }, variant = OrbitButtonVariant.Light, leadingIcon = OrbitIcon.Plus)

Estados

Descargarenabled

Descargardisabled

Web

<orbit-button size="md">Descargar</orbit-button>
<orbit-button size="md" disabled>Descargar</orbit-button>

Compose Multiplatform

OrbitButton(text = "Descargar", onClick = { /* ... */ })
OrbitButton(text = "Descargar", onClick = { /* ... */ }, enabled = false)

disabled usa el color sólido color.button-primary.background-disabled — no es una versión atenuada (alpha/opacity) del color habilitado.

Props

Prop	Tipo	Default	Descripción
text (children en web)	string	—	Texto del botón.
href	string?	null	Si se pasa, el botón navega al hacer click/Enter y usa role="link" en vez de "button".
size	"xs" | "sm" | "md" | "lg" | "xl"	"md"	Tamaño — controla padding y font-size.
variant	OrbitButtonVariant (Kotlin) / "primary" | "secondary" | "light" | "ghost" | "destructive" (web)	Primary / "primary"	Variante de color — cada una lee su propio set de tokens.
disabled	boolean	false	Deshabilita clicks/teclado y aplica el color background-disabled de la variante.
leadingIcon / attr leading-icon	OrbitIcon? (Kotlin) / "sparkles" | "arrow-right" | "download" | "plus" (web)	null	Ícono antes del texto — catálogo cerrado de Orbit, no acepta íconos arbitrarios.
trailingIcon / attr trailing-icon	OrbitIcon? (Kotlin) / "sparkles" | "arrow-right" | "download" | "plus" (web)	null	Ícono después del texto.