Chips

Tipos

Sólidos

Usamos chips para mostrar notificaciones, contandores o información de estado para mejor contexto.

Chips

Shared Design System

Desarrollo

Casa en la playa

San Borja 302, Viña del mar, Valparaíso

2 2 150m²

Color

Code

Label

Html Rails

            
              <div class="eb-chip">Label</div>

            
              <div class="eb-chip --primary">Label</div>

            
              <div class="eb-chip --warning">Label</div>

            
              <div class="eb-chip --success">Label</div>

            
              <div class="eb-chip --danger">Label</div>

            
              <%= tag.div 'Label', class: 'eb-chip' %>

            
              <%= tag.div 'Label', class: 'eb-chip --primary' %>

            
              <%= tag.div 'Label', class: 'eb-chip --warning' %>

            
              <%= tag.div 'Label', class: 'eb-chip --success' %>

            
              <%= tag.div 'Label', class: 'eb-chip --danger' %>

Outline

Color

Code

Label

Html Rails

            
              <div class="eb-chip --outline">Label</div>

            
              <div class="eb-chip --outline --primary">Label</div>

            
              <div class="eb-chip --outline --warning">Label</div>

            
              <div class="eb-chip --outline --success">Label</div>

            
              <div class="eb-chip --outline --danger">Label</div>

            
              <%= tag.div 'Label', class: 'eb-chip --outline' %>

            
              <%= tag.div 'Label', class: 'eb-chip --outline --primary' %>

            
              <%= tag.div 'Label', class: 'eb-chip --outline --warning' %>

            
              <%= tag.div 'Label', class: 'eb-chip --outline --success' %>

            
              <%= tag.div 'Label', class: 'eb-chip --outline --danger' %>

Icono

Color

Code

Label

Html Rails

            
              <div class="eb-chip --outline"><i class="fas fa-circle-info"> Label</div>

            
              <div class="eb-chip --primary --outline"><i class="fas fa-circle-info"> Label</div>

            
              <div class="eb-chip --warning --outline"><i class="fas fa-circle-info"> Label</div>

            
              <div class="eb-chip --success --outline"><i class="fas fa-circle-info"> Label</div>

            
              <div class="eb-chip --danger --outline"><i class="fas fa-circle-info"> Label</div>

            
              <%= tag.div class: 'eb-chip --outline' do %>
                <%= icon(:fas, 'circle-info') %> Label
              <% end %>

            
              <%= tag.div class: 'eb-chip --outline --primary' do %>
                <%= icon(:fas, 'circle-info') %> Label
              <% end %>

            
              <%= tag.div class: 'eb-chip --outline --warning' do %>
                <%= icon(:fas, 'circle-info') %> Label
              <% end %>

            
              <%= tag.div class: 'eb-chip --outline --success' do %>
                <%= icon(:fas, 'circle-info') %> Label
              <% end %>

            
              <%= tag.div  class: 'eb-chip --outline --danger' do %>
                <%= icon(:fas, 'circle-info') %> Label
              <% end %>

Tamaños

Code

Label

Html Rails

          
            <div class="eb-chip">Label</div>
            <div class="eb-chip --sm">Label</div>
            <div class="eb-chip --xs">Label</div>
            <div class="eb-chip --xxs">Label</div>

          
          <%= tag.div 'Label', class: 'eb-chip' %>
          <%= tag.div 'Label', class: 'eb-chip --sm' %>
          <%= tag.div 'Label', class: 'eb-chip --xs' %>
          <%= tag.div 'Label', class: 'eb-chip --xxs' %>

Configuración

Resumen

Tipo	Modificador
Color	--primary	Fondo primary, texto blanco
	--warning	Fondo amarillo, texto negro
	--danger	Fondo rojo, texto blanco
	--success	Fondo verde, texto blanco
Tamaño	--xxs	Altura 16px
	--xs	Altura 20px
	--sm	Altura 24px
		Altura 32px
Estilo¹	--outline	Bordes de color, fondo blanco

¹ Outline va asociado con los modificadores de color.