Componentes

Botones

Las botones de Poncho usan html, clases de Bootstrap y tienen funcionalidades opcionales para optimizar su vista en dispositivos móviles.


Acciones de botones según color

Botón de enlace

Acción por defecto. Pueden haber varios de estos botones en una misma página, pero no deben haber varios en un mismo grupo de botones.


                        <button type="button" class="btn btn-primary">Botón</button>
                      

Botones de enlace secundario o información

Acción secundaria. Pueden haber varios botones por página y por grupo de botones. Se usa en combinación con un botón de enlace o de acción principal, o pueden estar solos.


                        <button type="button" class="btn btn-link">Botón</button>
                    

Acción principal o exitosa

Call to action. Sólo puede haber uno por página. Se usa para ingresar a un sitio o avanzar en un formulario.


                        <button type="button" class="btn btn-success">Botón</button>
                      

Atención o peligro

Acción terminante o irreversible. Usar para borrar o cancelar algo.


                        <button type="button" class="btn btn-danger">Botón</button>
                      

Botones para etiquetas


                        <button type="button" class="btn btn-default btn-tag">Botón</button>
                      

Estados y variaciones

Estado Botón Código
Normal

                        <button type="button" class="btn btn-primary">Botón</button>
                    
Encima No es necesario, es automático.
En foco No es necesario, es automático.
Deshabilitado

                        <button type="button" class="btn btn-primary disabled">Botón</button>
                    
Con ícono

                        <button type="button" class="btn btn-primary"><i class="fa fa-user"></i> Botón</button>
                    
Cargando

                        <button type="button" class="btn btn-primary state-loading">Botón</button>
                    
Botón chico

                        <button type="button" class="btn btn-primary btn-sm">Botón</button>