# Button Un botón realiza una acción en la pantalla donde está: guardar, abrir, borrar. Para ir a otra página, es un Enlace. ## Playground ```html ``` ## Cuándo usarlo - Para una acción que ocurre aquí: guardar, enviar, abrir un Diálogo. - Para la acción principal de un formulario, al final. ## Cuándo no usarlo - **Para ir a otra página:** use un Enlace, incluso si parece una acción. - **Varios naranjas en una sola pantalla:** solo uno es la acción principal. ## Ejemplos ### Primario La acción para la que existe la pantalla. Naranja, y como máximo uno por pantalla. Mostrar código ```html ``` ### Por defecto Cada otra acción. Cuando hay duda, es esta. Mostrar código ```html ``` ### Peligro Acciones que destruyen o no pueden deshacerse. Vino, nunca naranja, y siempre con un Dialog antes de actuar. Mostrar código ```html ``` ### Con icono El icono viene antes de la palabra y va con ella, nunca en su lugar. Mostrar código ```html ``` ### Tamaños Pequeño para barras y herramientas, por defecto para casi todo, grande para la acción de una página completa. Mostrar código ```html ``` ## Anatomía 1. **Caja:** las esquinas irregulares de Feitio y la línea de tinta de 1px. 2. **Icono**, opcional: siempre antes de la palabra. 3. **Etiqueta:** verbo y objeto. 4. **Enfoque:** el contorno naranja, cada vez que llega el teclado. ## Estados - **Sobre:** el papel se eleva un poco. - **Focus:** el borde naranja, cada vez que llega el teclado. - **Waiting:** dice qué está haciendo ("Guardando…") e ignora otro toque. ## Hacer y no hacer Do Guardar cambiosCancelar Un solo naranja, con verbo y objeto. Don’t OKCancelar Dos naranjas y un "OK" que no dice nada. ## Escritura - Verbo y objeto: "Guardar cambios", "Eliminar calendario". Nunca "OK" o "Sí". - Dos o tres palabras; mayúscula solo en la primera. ## Accesibilidad - Es un `