palaze-web Palaze web Docs Github Empezando Componentes Button Card Colors Divider Footer Header Hero Menu Menu-dropdown Menu-item Section Showcase Sidebar Spinner Tooltip Design System Colores Tipografia Formas

Button

<plz-button> | PlzButton

Los componentesbuttonrepresentan acciones accesibles desde un click por el usuario.

Se utilizan en distintos contextos y situaciones en una misma página. Pueden usarse para busquedas, para formularios, para contactos, para redes sociales, para cargas, etc.

Press me

Ejemplos

Variantes del componente button

Usaremos el atributo variant para elegir el estilo del componente que se prefiera entre "default", "shadow", "progress" y "icon".

Dentro de los usos del componente, los más usados son estas cuatro variantes.

Default Shadow Progress Link

Link button

Usaremos el atributo link para determinar la url a la que se accederá al hacer click en el componente. En caso de no determinar una url mediante el atributo, se dará por entendido que se usa el componente con otro tipo de acción.

Para asegurarnos que el link se abre como queremos, haremos uso del atributo target, en este podremos elegir entre "_blank", "_self", "_parent", "_top" y "framename". En el caso de no hacer uso de este atributo, se utilizará por defecto "_self" (se abrirá la página en el mismo marco en el que se ha hecho el click).

Estos dos atributos se pueden usar con las distintas variantes del compoennte.

Link

Colores del componente button

Usaremos el atributo color para elegir el color del componente que se prefiera entre "black", "purple", "blue", "green", "red", "orange", "yellow" y si no eliges ningún color tendrás el de por defecto.

Dependiendo del estilo de página en que se usen, es apropiado cambiar el color acorde a esta.

Basic Negro Morado Azul Verde Rojo Naranja Amarillo

Colores hover del componente

Usaremos el atributo hover-color para elegir el color de componente para cuando pasemos por encima de este con el cursor, si no haces uso de este atributo, no habrá hover en el componente.

Se puede usar tanto hex, rgb o rgba para el atributo hover-color.

Docs

Variante Progress

Usaremos el atributo variant para elegir "progress". También haremos uso del atributo active al que deberemos pasarle "true" o "false" dependiendo de si queremos que el componente esté activo o no. En el caso de que no esté activado, pasará a ser un button normal hasta que el atributo active cambie. Este tipo de variente se suele usar principalmente en formularios, ya que puedes indicar al usuario que su petición se está procesando y una vez termine volverá a la normalidad (es dinámico).

Podremos elegir el color de la animación de carga del interior del componente mediante el atributo color-progress.

A continuación ejemplos de la variante en sus dos versiones (activado y no activado).

Progress Progress

Sombras del componente button

Usaremos el atributo shadow-color para elegir entre "black", "purple", "blue", "green", "red", "orange" y "yellow". También puedes elegir colores como hemos visto anteriormente con el atributo color.

Puedes buscar combinaciones entre los distintos atributos para dar forma, color, sombra y tamaño dependiendo de lo que estés buscando para tu sitio web.

Basic Negro Morado Azul Verde Rojo Naranja Amarillo

Variante icon

Usaremos el atributo variant para elegir "icon" y el atributo icon para elegir entre "github", "linkedin" y "mail" en el caso de querer los icon button predefinidos. Este tipo de button se usa en gran variedad de ocasiones, pero siempre va a destacar para compartir información de redes sociales.

A continuación un ejemplo de los distintos iconos con diferentes tamaños:

Recalcar que si deseas un icono distinto, siempre puedes añadirlo pasando por el atributo icon la ruto de la imagen que deseas como botton. La imagen será detectada como podemos observar en la segunda tanda de ejemplo.

Forma del componente button

Usaremos el atributo corner para elegir la forma del botón que se prefiera entre "default", "low-rounded", "rounded", "square", y "circle".

Square Default Low Rounded Rounded Circle

Tamaño del componente button

Puedes usar el atributo size para elegir el tamaño de button que se prefiera entre "small", "default" y "big".

Dentro de estos tamaños, lo normal es uno ni grande ni pequeño, pero siempre hay casos donde puedes necesitar distintas opciones.

Small Default Big

Recomendación

Se puede hacer uso de todo lo que hemos visto anteriormente para hacer combinaciones.

Atributos

Nombre Descripción Posibilidades Por defecto
variant Distintas variantes del componente 'default' - 'icon' - 'progress' 'default'
link Url a la que se accedera a partir del componente 'docs-ejemplo.html'
target Distintas formas de mostar el link del componente '_self' - '_blank' - '_parent' - '_top' - 'framename' '_self'
color Distintos colores del componente 'default' - 'black' - 'purple' - 'blue' - 'green' - 'red' - 'orange' - 'yellow' 'default'
hover-color Distintos colores para el hover del componente hex, rgb, rgba
color-progress Distintos colores para la animación de carga del componente hex, rgb, rgba 'white'
shadow-color Distintos colores de sombra para el componente 'black' - 'purple' - 'blue' - 'green' - 'red' - 'orange' - 'yellow'
size Distintos tamaños del componente botón 'default' - 'small' - 'big' 'default'
corners Distintas formas de las esquinas del componente 'default' - 'low-rounded' - 'rounded' - 'square' - 'circle' 'default'
icon Solo compatible con la variante "icon". Distintos iconos para la variante 'github' - 'linkedin' - 'mail' - 'palaze' - '..url..'