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.
En esta página
Playground
Variante
Tamaño
Estado
Fondo
<button class="feitio-button" type="button">Guardar cambios</button>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
<button type="button" class="feitio-button" data-variant="primary">Salvar alterações</button>Por defecto
Cada otra acción. Cuando hay duda, es esta.
Mostrar código
<button type="button" class="feitio-button">Cancelar</button>Peligro
Acciones que destruyen o no pueden deshacerse. Vino, nunca naranja, y siempre con un Dialog antes de actuar.
Mostrar código
<button type="button" class="feitio-button" data-variant="danger">Apagar agendamento</button>Con icono
El icono viene antes de la palabra y va con ella, nunca en su lugar.
Mostrar código
<button type="button" class="feitio-button">
<svg class="feitio-icon" aria-hidden="true"><use href="feitio/icons/sprite.svg#feitio-plus"/></svg>
Novo agendamento
</button>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
<button type="button" class="feitio-button" data-size="small">Pequeno</button>
<button type="button" class="feitio-button">Padrão</button>
<button type="button" class="feitio-button" data-size="large">Grande</button>Anatomía
- Caja: las esquinas irregulares de Feitio y la línea de tinta de 1px.
- Icono, opcional: siempre antes de la palabra.
- Etiqueta: verbo y objeto.
- 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
Un solo naranja, con verbo y objeto.
Don’t
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
<button>real, con untype: los teclados y lectores de pantalla ya lo saben. - Solo icono, sin palabra, recibe un
aria-label. - Un objetivo de al menos 40px, incluso cuando es pequeño.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-button" | obligatorio | El botón Feitio. |
data-variant | "primary", "danger" | Primario (naranja) o peligro (tinto). Sin él, el predeterminado. |
data-size | "small", "large" | Petite (32px, 40px touch) o grande (52px). |
aria-busy | "true" | Mientras la acción se ejecuta: espera e ignora otro toque. |