Botón

    Utilice el componente de botón para representar el desencadenante de una acción simple que el usuario puede realizar. Los botones se utilizan en tarjetas, cuadros de diálogo, formularios y muchos otros componentes y patrones. El botón es visualmente idéntico a la Ignite UI for Angular

    Button Demo

    Type

    Se admiten cinco tipos de botones:

    • Un botón contenido más prominente con relleno de color y sombra que enfatiza una acción.
    • Un botón delineado menos prominente con un color de contorno apropiado para la mayoría de las acciones.
    • Un botón plano muy sutil que normalmente se utiliza para las acciones menos importantes.
    • Un botón de icono para acciones que se representan únicamente con un icono.
    • Un botón de acción flotante (Fab) muy destacado con relleno de color y sombra que se utiliza una vez por pantalla para enfatizar fuertemente la acción principal.

    Interaction States

    También puede insertar cada botón en un estado deshabilitado porque todos admiten variantes habilitadas y deshabilitadas. En Figma puedes cambiar entre los dos usando una operación booleana desde el panel de propiedades. En Adobe XD utilizamos el paradigma Component States para permitirle cambiar fácilmente entre ellos.

    States

    Los botones habilitados admiten el estado de reposo y desplazamiento. En Figma, hemos agregado un estado enfocado adicional, que se puede cambiar cambiando la propiedad Estado. En Sketch esto se logra con Symbol Overrides, mientras que en Adobe XD utilizamos el paradigma Component States para permitirle cambiar fácilmente entre estados.

    Layout Template

    Los botones de acción contenidos, delineados, planos y flotantes admiten plantillas de iconos y etiquetas flexibles. En Figma, para mostrar u ocultar los íconos, puede usar las propiedades booleanas Icono izquierdo e Icono derecho. Si desea tener un botón de icono, puede establecer la propiedad Contenido en Icono. En Sketch, las reglas de diseño inteligente aplicadas permiten que el diseño se ajuste en consecuencia cuando configura los elementos que desea ocultar en ~Sin símbolo. En Adobe XD, se logra lo mismo eliminando la capa no utilizada. Sin embargo, si solo desea cambiar la posición de la etiqueta y el ícono en tiempo de diseño, simplemente puede arrastrar uno de ellos al otro lado del otro.

    Estilismo

    Los botones vienen con flexibilidad de estilo a través de las diversas opciones para los colores de fondo, etiqueta e ícono.

    Usage

    Cuando el contenido de un Botón contiene una etiqueta, esta debe estar en mayúsculas y con un tratamiento de fuente más gruesa (normalmente Media o Semi-negrita). Cuando se necesita más de un botón para un diseño, dimensionelos con la misma altura y colóquelos en el mismo plano horizontal uno al lado del otro con suficiente espacio en ambos lados para evitar toques y clics erróneos. En tales diseños, evite combinar los diferentes tipos de botones. Preferiblemente, querrás elegir uno y usarlo de manera consistente para todas las acciones que pertenecen a esa sección de la interfaz de usuario.

    Hacer No

    Additional Resources

    Temas relacionados:

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.