Saltar al contenido
Moodle Design Systemby Didactika
Moodle 5.3 LTS
v0.1
ES
Componentes de Bootstrap
Tema de Didactika v0.1

Botones

Los botones del tema, sin tocar. Una acción principal por zona, peligro para lo que elimina, y un icono solo donde la tabla de iconos lo tiene.

Un botón inicia una acción. Es el mismo componente en todos los plugins: el del tema, con sus clases, y nunca lo redibuja un plugin. Solo el marco de una lista (la barra de herramientas sobre una tabla) redondea sus botones, y lo hace con una clase de la capa, no reestilizando .btn.

Cuándo usarlo

Úsalo

  • btn-primary para la acción principal de una página, un formulario o un diálogo. Uno por zona.
  • btn-secondary o btn-outline-secondary para las demás: Cancelar, Importar, Exportar.
  • btn-danger para lo que elimina o detiene, también en el botón de confirmar de su diálogo.
  • Un icono antes del texto cuando la acción tiene uno en la tabla de iconos; un botón solo con icono siempre lleva título y una etiqueta oculta.

No lo hagas

  • Redibujar botones en un plugin: colores, radio, relleno o peso.
  • Poner dos botones primarios uno al lado del otro.
  • Usar un enlace con aspecto de botón para enviar un formulario, o un botón para navegar.
  • Usar rojo para algo que no elimina ni detiene.

Anatomía

Un botón tiene una etiqueta (texto, o un icono con etiqueta oculta), un icono opcional antes de la etiqueta, y un color que dice lo que hace. No hay icono al final.

Variantes y estados

Cada color frente a cada estado. Hover y foco se fuerzan desde el CSS propio de la versión, así que lo que ves es lo que ve una persona usuaria.

Sólido
ReposoHoverFocoDesactivado
primary
secondary
success
danger
warning
info
light
dark
Contorno
ReposoHoverFocoDesactivado
primary
secondary
success
danger
warning
info
dark
Enlace
ReposoHoverFocoDesactivado
link

Tamaños

Pequeño, normal y grande

Usa el tamaño normal casi siempre. El pequeño es para sitios densos (una barra flotante, una fila de tabla); el grande, solo para una llamada a la acción en una página vacía.

Con iconos y en grupos

Los iconos vienen de Moodle

Los iconos se escriben con el identificador de icono de Moodle ({{#pix}}t/add, core{{/pix}} en una plantilla, pix_icon('t/add', ...) en PHP), nunca con una clase de Font Awesome: cada versión de Moodle dibuja el mismo identificador con su propia fuente. Cambia la versión arriba y los iconos cambian.

Grupo
Ancho completo

Botones de icono con contador

Un botón que solo lleva un icono es siempre un círculo. Un contador en su esquina (badge-float) dice cuántas cosas esperan detrás; sin número, la insignia se vuelve un punto que solo dice que hay algo nuevo. El contador no sustituye la etiqueta del botón: sigue teniendo title y aria-label que incluyen el número.

Botones de icono redondos con contador
Plain
Tonal
Outline
Filled
Sizes

Botones tonales y planos

Entre el botón relleno y el de contorno hay uno tonal (btn-tonal): un tinte suave del color del rol detrás de la etiqueta. Es para acciones que importan pero no deben competir con la principal. Un botón de icono tiene cuatro pesos, del más fuerte al más discreto: relleno, tonal, de contorno y plano (btn-link btn-icon); elige el que corresponda al peso de la acción en su fila.

Botones tonales y los cuatro pesos de un botón de icono
Filled Tonal Outline Plain Tonal danger

Combinaciones

Combinación Para qué usarla
Tamaño × color Pequeño en barras de herramientas y filas de tabla, normal en el resto, grande para una sola llamada a la acción. El tamaño nunca cambia el color ni la etiqueta.
Relleno × contorno × enlace Relleno para la acción principal, contorno para las secundarias, enlace para las más discretas. Un solo botón relleno por zona.
Icono + etiqueta El icono va antes de la etiqueta, en acciones que lo tienen en la tabla de iconos. En sitios densos usa un botón solo con icono (btn-icon), siempre con título y aria-label.
Grupo Una elección entre vistas (cuadrícula, lista, mapa) o un botón dividido (Guardar con su menú). Los extremos son redondos y las uniones rectas.
Botón + badge Un recuento dentro del botón («Mensajes 4»). Nunca una frase.

Qué cambia Didactika y por qué

Qué cambiamos Por qué ayuda
Un rectángulo redondeado (radio de 8 px), de 36 px de alto, con más relleno a los lados que arriba y abajo Se lee como clicable, mantiene la etiqueta centrada y es un paso más redondo que los botones cuadrados de Bootstrap sin llegar a ser una píldora.
Los botones de contorno y de enlace responden con un tinte de su propio color Bootstrap los inunda de color sólido al pasar el ratón y la etiqueta se vuelve blanca sobre una página clara. Un tinte mantiene la etiqueta legible y muestra el estado pulsado sin gritar.
Los botones solo con icono son siempre redondos (btn-icon) El objetivo tiene el mismo alto y ancho y ninguna esquina que llame la atención, así que una fila de acciones con icono queda alineada y es fácil de pulsar.
Un solo anillo de foco de 3 px en todos los botones Quien usa el teclado ve siempre dónde está, con la misma señal que tiene en campos y enlaces.
Un grupo es una sola pieza y el disparador de un botón dividido la cierra El grupo se lee como un solo control y no como dos botones que se tocan.

Clases

Clase Qué hace
btn Base de todo botón
btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark Color por significado
btn-outline-* Variante con contorno para acciones secundarias
btn-link Parece un enlace, actúa como botón
btn-sm, btn-lg Más pequeño y más grande
btn-group Une botones relacionados
d-grid gap-2btn-block Pila a ancho completo
btn-closeclose Botón de cerrar dentro de alertas y modales, lo escribe Moodle
btn-tonal Un tinte suave del color del rol en vez de un fondo relleno (Didactika)
btn-icon Botón redondo que solo contiene un icono. Añade btn-sm o btn-lg para los otros tamaños (Didactika)

En esta versión

Bootstrap 5.3 dibuja el anillo de foco como una sombra suave alrededor del botón y fija los colores de cada botón con variables CSS (--bs-btn-*), lo que permite a un tema recolorear un botón con una sola variable. Los iconos se dibujan con Font Awesome 6.

Bootstrap 4.6 da a cada botón colores fijos y dibuja el foco como una sombra de color, así que un tema recolorea un botón compilando sus colores. Los iconos se dibujan con Font Awesome 6.

Bootstrap 4.6 da a cada botón colores fijos y dibuja el foco como una sombra de color, así que un tema recolorea un botón compilando sus colores. Los iconos se dibujan con Font Awesome 4.7.

Accesibilidad

  • Un button para una acción y un a para navegar; nunca al revés.
  • Un botón solo con icono lleva title y aria-label (o un texto oculto).
  • disabled lo saca del orden de tabulación; usa aria-disabled solo cuando el motivo deba seguir siendo legible con teclado.
  • Estado pulsado de un interruptor: aria-pressed.
  • El contraste de la etiqueta frente al color cumple 4,5:1 en todos los colores de tema de Moodle; un tema que cambie los colores tiene que mantenerlo.