Buttons

Tipos

Sólidos

Por defecto nuestro botones son elementos sólidos y diferenciamos su uso con los colores, esto dará pistas al usuario de qué tipo de acción se ejecutará.

Buttons

Pincali/EB Design System

Color

Code

Button

Html Rails

            
              <a href="#" class="button --primary">Button</a>

            
              <a href="#" class="button --secondary">Button</a>

            
              <a href="#" class="button --danger">Button</a>

            
              <a href="#" class="button --white">Button</a>

            
              <a href="#" class="button --ghost">Button</a>

            
              <%= tag.button 'Button', class: 'button --primary' %>

            
              <%= tag.button 'Button', class: 'button --secondary' %>

            
              <%= tag.button 'Button', class: 'button --danger' %>

            
              <%= tag.button 'Button', class: 'button --white' %>

            
              <%= tag.button 'Button', class: 'button --ghost' %>

Outline

Color

Code

Button

Html Rails

            
            <a href="#" class="button --outline">Button</a>

            
            <a href="#" class="button --outline --primary">Button</a>

            
            <a href="#" class="button --outline --danger">Button</a>

            
            <%= tag.button 'Button', class: 'button --outline' %>

            
            <%= tag.button 'Button', class: 'button --outline --primary' %>

            
            <%= tag.button 'Button', class: 'button --outline --danger' %>

Inline

Color

Code

Button

Html Rails

            
            <a href="#" class="button --inline">Button</a>

            
            <a href="#" class="button --inline --primary">Button</a>

            
            <a href="#" class="button --inline --danger">Button</a>

            
            <%= tag.button 'Button', class: 'button --inline' %>

            
            <%= tag.button 'Button', class: 'button --inline --primary' %>

            
            <%= tag.button 'Button', class: 'button --inline --danger' %>

--inline puede ser usado en párrafos, alertas, mensajes, etc.

Icono

Iconos

Estilos

Color

Code

Button

Html Rails

            
             <a href="#" class="button --outline --white --icon"><i class="fas fa-phone"></i></a>
             <a href="#" class="button --outline --white"><i class="fas fa-phone"></i>Button</a>

            
             <a href="#" class="button --outline --primary --icon"><i class="fas fa-phone"></i></a>
             <a href="#" class="button --outline --primary"><i class="fas fa-phone"></i>Button</a>

            
             <a href="#" class="button --outline --secondary --icon"><i class="fas fa-phone"></i></a>
             <a href="#" class="button --outline --secondary"><i class="fas fa-phone"></i>Button</a>

            
             <a href="#" class="button --outline --danger --icon"><i class="fas fa-phone"></i></a>
             <a href="#" class="button --outline --danger"><i class="fas fa-phone"></i>Button</a>

            
            <%= tag.button icon(:fas, :phone), class: "button --outline --white --icon" %>
            <%= tag.button class: "button --outline --white" do %>
              <%= icon(:fas, :phone) %> Button
            <% end %>

            
            <%= tag.button icon(:fas, :phone), class: "button --outline --primary --icon" %>
            <%= tag.button class: "button --outline --primary" do %>
              <%= icon(:fas, :phone) %> Button
            <% end %>

            
            <%= tag.button icon(:fas, :phone), class: "button --outline --secondary --icon" %>
            <%= tag.button class: "button --outline --secondary" do %>
              <%= icon(:fas, :phone) %> Button
            <% end %>

            
            <%= tag.button icon(:fas, :phone), class: "button --outline --danger --icon" %>
            <%= tag.button class: "button --outline --danger" do %>
              <%= icon(:fas, :phone) %> Button
            <% end %>

Usar --icon es un modificador que asegura un aspect-ratio 1:1 sin importar el tamaño.

Nota Si solo queremos un botón con icono y sin texto debemos agregar --icon.

Tamaño

Longitud

Code

Button

Html Rails

          
            <a href="#" class="button --outline --full">Button</a>
            <a href="#" class="button --outline">Button</a>

          
            <%= tag.button 'Button', class: 'button --outline --full' %>
            <%= tag.button 'Button', class: 'button --outline' %>

--full es usado generalmente para breakpoints mobile, como por ejemplo los footer sticky con CTA.

Alturas

Code

Button

Html Rails

          
            <a href="#" class="button --outline --lg">Button</a>
            <a href="#" class="button --outline">Button</a>
            <a href="#" class="button --outline --sm">Button</a>
            <a href="#" class="button --outline --xs">Button</a>

          
            <%= tag.button 'Button', class: 'button --outline --lg' %>
            <%= tag.button 'Button', class: 'button --outline' %>
            <%= tag.button 'Button', class: 'button --outline --sm' %>
            <%= tag.button 'Button', class: 'button --outline --xs' %>

Características

Área de interacción

Podemos aumentar el área de interacción de los botones para mejorar la accesibilidad y para mitigar interacciones erróneas. Esto es muy útil cuando usamos botones pequeños aislados.

Hacer hover () sobre el botón para ver un ejemplo.

Code

Html Rails

          
            <a href="#" class="button --primary --icon --circle --target-area-lg"><i class="far fa-xmark"></i></a>

          
            <%= tag.button icon(:far, 'xmark'), class: 'button --icon --outline --circle --target-area-lg' %>

Puedes usar --target-area-md o --target-area-lg que aumenta el área clickeable en relación al tamaño del elemento un x1.5 y x2 respectivamente.

Responsive

Cuando tenemos botones con icono y texto pero necesitamos que en mobile solo se vea el icono, podemos usar el modificador --responsive

Code

Mobile Tablet Desktop

Html Rails

          
            <a href="#" class="button --outline --icon --responsive">
              <i class="far fa-ufo"></i>
              <span>ufo</span>
            </a>

          
            <%= tag.button class: 'button --outline --icon --responsive' do %>
              <%= icon(:far, 'ufo') %>
              <%= tag.span 'ufo' %>
            <% end %>

Para que esto tenga efecto en mobile, no olvidar que el texto debe estar envuelto en un <span>

Configuración

Resumen

Tabla con todos los modificadores contextuales disponibles para el componente Buttons. Los modificadores de tamaño, color y estilo pueden combinarse entre sí.

Tipo	Modificador (CSS Class)
Color	--primary	Fondo primary, texto blanco
	--white	Fondo blanco, texto negro
	--ghost	Fondo transparente, texto negro
	--secondary	Fondo secondary, texto primary
	--gray	Fondo gris, texto negro
	--danger	Fondo rojo, texto blanco
	--inverted	Fondo transparente, texto blanco
	--link	Fondo blanco, texto azul
Estilo¹	--outline	Bordes de color, fondo blanco
	--inline	Display inline, texto decorado
	--icon	Altura y anchura mínima 1:1
Tamaño	--xs	Altura mínima 36px
	--sm	Altura mínima 40px
		Altura mínima 44px
	--lg	Altura mínima 48px
	--full	Ancho 100%
Forma	--circle	Forma circular
Otros	--responsive	En mobile solo se muestra el icono.
Otros	--target-area	El area clickeable crece en relación al botón

¹ Inline y Outline va asociado con los modificadores de color.