Todos los componentes (204)
Botón de tema
Acciones · ThemeButton
Qué es y cuándo usarlo
Cambiar de tema: claro, oscuro o el que diga el sistema operativo. Las tres opciones, no dos: un interruptor de dos posiciones no deja volver a «lo que diga el sistema» una vez tocado, y es lo que trae puesto casi todo el mundo.
Cuándo usarlo
- En la cabecera de la aplicación o de la tienda, con
shape="cycle"(por defecto): un botón de icono que va pasando de claro a oscuro, a «el del sistema» y vuelta a empezar.withTextle pone el nombre del tema al lado del icono. - En la página de ajustes, con
shape="group": las tres opciones a la vista.
Cuándo no
- Para cualquier otro sí o no:
Switch. - Si la aplicación solo tiene un tema, no se pone.
Teclado: en rueda, Tab llega al botón e Intro o Espacio pasan al tema siguiente. En grupo es un grupo de opciones: Tab entra en la marcada y las flechas cambian de tema.
Accesibilidad: el nombre del botón dice cómo está y a qué pasa: «Tema: claro. Cambiar a oscuro». Al cambiar se anuncia el tema y cómo se ve («Tema el del sistema, se ve oscuro»). El icono nuevo entra girando solo cuando lo cambia la persona, no al cargar.
Cómo funciona: escribe data-theme en el <html> (o lo quita, para «el del sistema») y guarda la elección en localStorage (amset-theme). En esta ficha cambia el tema de toda la vista previa, igual que en una aplicación.
Aspecto fino: sin variables propias. En rueda es un IconButton (ghost por defecto, con variant, tone y size; --amset-button-*) con las clases amset-theme__button, amset-theme__icon y amset-theme__text; en grupo, un SegmentedGroup con la clase amset-theme.
Cómo se ve
Cambia el tema de toda la web, igual que el conmutador de la cabecera: escribe en el atributo del documento y lo recuerda.
<ThemeButton withText variant="outline" />
<ThemeButton shape="group" />Props
Se importa con import { ThemeButton } from '@amset/ui'. Las obligatorias van marcadas.
| Prop | Tipo | Para qué sirve |
|---|---|---|
className | string | Se une a las clases de la biblioteca, no las sustituye. |
shape | ThemeButtonShape | — |
size | "sm" | "md" | "lg" | — |
tone | "neutral" | "accent" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error" | — |
variant | "solid" | "soft" | "outline" | "ghost" | Como se pinta el boton de la rueda. Por defecto, fantasma. |
withText | boolean | Texto al lado del icono en la forma de rueda. |
Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.
En el banco de pruebas
Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: