Module

Sistema de diseño

Diseñado por

Átomos >

Botones

Anatomía

Un botón está estructurado sobre el label, los rellenos inferior y superior tiene una unidad (1X) y los rellenos laterales tienes dos unidades (2X). Por ejemplo: Un botón estándar, tiene padding (top-bottom) de 12px y padding (right-left) de 24px

Tipos

Primario

Botón que contiene la acción principal dentro de un componente, es ideal, que solo exista uno por vista o instancia.

				
					<p-button label="Button"></p-button>

Primario con ícono

Para agregar refuerzo semántico, a los botones Primarios se les puede agregar ícono.

				
					<p-button label="Button" icon="pi-check"></p-button>

Secundario

Botón que contiene una acción complementaria dentro de un componente, puede existir más de uno por vista o instancia.

				
					<p-button label="Button" [outlined]="true"></p-button>

Secundario con ícono

Para agregar refuerzo semántico, a los botones Secundarios se les puede agregar ícono.

				
					<p-button label="Button" icon="pi-check" [outlined]="true"></p-button>

Variación de tamaño

Los botones tienen por defecto el tamaño -medium- se puede variar por -small- (pequeño) y -large- (grande)

				
					<p-button label="Button" size="small"></p-button>
<p-button label="Button"></p-button>
<p-button label="Button" size="large"></p-button>

Deshabilitado

En algunos escenarios, un botón puede estar inhabilitado hasta cumplir con la validación que lo activa.

				
					<p-button label="Button" [disabled]="true"></p-button>

Con elevación (Sombra)

Los botones primarios pueden tener una elevación o sombra para hacer que destaque dentro de la interfaz.

				
					<p-button label="Button" [raised]="true"></p-button>