Botón

    Utilice el componente Button para representar el desencadenador de una acción sencilla que el usuario puede realizar. Los botones se utilizan en tarjetas, diálogos, formularios y muchos otros componentes y patrones. El botón es visualmente idéntico al componente Ignite UI for Angular botón

    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 puedes insertar cada botón en un estado deshabilitado, ya que todos admiten las variantes Habilitado y Deshabilitado. En Figma puedes cambiar entre los dos usando una operación booleana desde el panel de propiedades. En Adobe XD, usamos el paradigma Component States para permitirte cambiar fácilmente entre ellos.

    States

    Los botones habilitados admiten el estado Inactivo y Hover. En Figma, hemos agregado estados adicionales Focused y Focused & Hover, entre los que se pueden cambiar cambiando la propiedad State. En Sketch esto se logra con Symbol Overrides, mientras que en Adobe XD estamos utilizando el Component States paradigma para permitirle cambiar fácilmente entre estados.

    Layout Template

    Los botones de acción contenidos, contorneados, planos y flotantes admiten plantillas flexibles de iconos y etiquetas. En Figma, para mostrar u ocultar los iconos, puede utilizar 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 establece los elementos que desea ocultar en ~Sin símbolo. En Adobe XD, se consigue lo mismo eliminando la capa no utilizada. Sin embargo, si solo desea cambiar la etiqueta y la posición del icono 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.