Botones en Jetpack Compose Glimmer

Dispositivos de realidad extendida correspondientes
Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de realidad extendida.
Más información sobre los tipos de dispositivos de realidad extendida →
Display Glasses
Más información sobre los tipos de dispositivos de realidad extendida →

En Jetpack Compose Glimmer, un Button es un componente interactivo optimizado para la entrada de lentes de visualización, que ofrece comentarios visuales claros a través de sus estados para guiar las acciones del usuario.

Los botones se basan en el sistema de superficies Glimmer de Jetpack Compose, que controla automáticamente las propiedades físicas, como los bordes y la profundidad.

El botón estándar contiene una etiqueta de texto y, de manera opcional, íconos. Puedes usarlo para acciones principales o secundarias. También hay botones especializados, como los botones de ícono y los botones de activación, que se definen como componentes separados en Jetpack Compose Glimmer.

Predeterminado

Un ejemplo de algunos estilos diferentes de botones en Jetpack Compose Glimmer. En estos ejemplos, se muestran botones predeterminados de tamaño mediano con tres estados: Habilitado (1), Enfocado (2) y Presionado (3).

Grande

Un ejemplo de algunos estilos diferentes de botones en Jetpack Compose Glimmer. En estos ejemplos, se muestran botones de gran tamaño con tres estados: habilitado (1), enfocado (2) y presionado (3).

Anatomía

Un botón consta de un contenedor y una etiqueta, con íconos iniciales y finales opcionales.

Parte Descripción

Contenedor

Es la superficie de fondo del botón.

Etiqueta

Es el texto que describe la acción.

Ícono (opcional)

Indicadores visuales iniciales o finales

Tamaños

Los botones de Glimmer de Jetpack Compose admiten dos variantes de tamaño. Estos afectan la altura mínima y el padding interno.

Tamaño Altura mínima Uso predeterminado

Medio

48.dp

Acciones y listas estándar (predeterminado).

Grande

72.dp

Acciones de énfasis alto o puntos de entrada principales de la pantalla

Estados

Los botones de Glimmer de Jetpack Compose cambian su apariencia para comunicar su estado.

  • Habilitado: Es el estado predeterminado de un botón interactivo.
  • Enfocado: Cuando está enfocado, el botón aplica un GlimmerTheme.depthEffectLevels.level1 y un borde destacado de enfoque.
  • Presionado: Cuando se activa, se aplica una capa superpuesta blanca semitransparente a la superficie.
  • Inhabilitado: El botón no responde a la entrada y se ajusta su apariencia visual.

Configuración predeterminada del botón

Los siguientes valores predeterminados se aplican a los botones estándar:

  • De forma predeterminada, los botones usan GlimmerTheme.typography.bodySmall. Asegúrate de que el texto de los botones sea conciso y describa claramente la acción.
  • La forma predeterminada de un botón es GlimmerTheme.shapes.large. Este redondeo coherente ayuda a los usuarios a identificar los botones en la interfaz de los lentes de pantalla.

Ejemplo: Botón con texto

El siguiente código crea un botón estándar con texto:

@Composable
fun ButtonSample() {
    Button(onClick = {}) { Text("Send") }
}

Ejemplo: Botones con íconos al principio y al final

También puedes agregar íconos al principio (con leadingIcon) o al final (con trailingIcon) del texto para proporcionar contexto adicional.

El siguiente código crea un botón con un ícono inicial:

@Composable
fun ButtonWithLeadingIconSample() {
    Button(onClick = {}, leadingIcon = { Icon(FavoriteIcon, "Localized description") }) {
        Text("Send")
    }
}