Configurar estilos de botón reutilizables

Abre Settings → POM Theme → Design system → Buttons para definir un botón predeterminado y cualquier estilo adicional que necesites para acciones distintas.

Configurar el botón predeterminado

El estilo predeterminado ofrece la presentación base para los botones compatibles. Configura:

• Button name;
• el color del texto;
• un fondo sólido, con degradado o transparente;
• los colores y la dirección del degradado cuando esté seleccionado;
• el ancho del borde por cada lado, el color del borde, el estilo y el radio;
• una sombra de caja avanzada opcional;
• la fuente, el grosor, la transformación del texto, la altura de línea y el espaciado entre letras;
• las correspondientes Hover options y los efectos de icono o color admitidos.

Comienza por el estado normal y luego diseña el estado hover sin modificar tanto el tamaño del botón que el contenido circundante se desplace.

En Hover options, los Hover background colors pueden usar colores personalizados o derivar colores que sean un 20 % más oscuros o más claros que el fondo normal. Con un fondo de degradado, el ajuste seleccionado se aplica a ambos colores del degradado.

Box shadow (advanced) acepta un valor CSS estándar box-shadow. Usa none por sí solo para eliminar la sombra, o separa varias sombras reales con comas.

Añadir un estilo alternativo

En Additional button styles:

1. añade una entrada de botón;
2. introduce un Button name descriptivo;
3. introduce un Button slug corto, como secondary o danger;
4. configura los estados normal y hover;
5. guarda la subsección;
6. selecciona el estilo en un control compatible de botón, formulario o tema.

POM sanea los slugs y sustituye los valores que falten o estén duplicados al guardar los ajustes. Después de que un estilo esté en uso, mantén su slug estable para que las selecciones existentes sigan haciendo referencia al mismo diseño.

Usar un conjunto restringido

Crea estilos según su propósito:

• acción principal;
• acción secundaria;
• acción discreta o similar a un texto;
• acción destructiva cuando el producto la necesite.

No crees un nuevo estilo global para el espaciado o la etiqueta de una sola página.

Revisar todos los estados

Coloca los estilos sobre fondos representativos claros y oscuros. Comprueba los contextos normal, hover, foco del teclado, activo y deshabilitado allí donde el componente que los consume los proporcione. El texto y los iconos deben seguir siendo legibles, y el color no debe ser la única distinción entre acciones.

Si una instancia tiene un aspecto diferente, inspecciona el estilo seleccionado de ese componente, su tamaño, la opción de ancho completo y las clases locales antes de cambiar el botón global.