Botones
Los botones permiten iniciar acciones o navegar a otras páginas. Las etiquetas de los botones expresan qué acción ocurrirá cuando la persona usuaria interactúe con él.
Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.
Tipos
<button type="button" class="btn btn-primary">Primario</button>
<button type="button" class="btn btn-secondary">Secundario</button>
<button type="button" class="btn btn-tertiary">Terciario</button>
<button type="button" class="btn btn-success">Éxito</button>
<button type="button" class="btn btn-danger">Error</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-outline-primary">Primario</button>
<button type="button" class="btn btn-outline-secondary">Secundario</button>
<button type="button" class="btn btn-outline-tertiary">Terciario</button>
<button type="button" class="btn btn-outline-success">Éxito</button>
<button type="button" class="btn btn-outline-danger">Error</button>
<button type="button" class="btn btn-outline-light">Light</button>
En caso de requerir que un elemento anchor adopte el estilo de un botón, simplemente pueden utilizarse las clases correspondientes de botones.
<a class="btn btn-primary" href="#" target="_blank" rel="noopener noreferrer">
Enlace
</a>
<a class="btn btn-outline-primary" href="#" target="_blank"
rel="noopener noreferrer">
Enlace
</a>
Tamaños
<button type="button" class="btn btn-primary btn-sm">Chico</button>
<button type="button" class="btn btn-primary">Mediano</button>
<button type="button" class="btn btn-primary btn-lg">Grande</button>
Estado Deshabilitado
<button type="button" class="btn btn-primary" disabled>Primario</button>
<button type="button" class="btn btn-secondary" disabled>Secundario</button>
<button type="button" class="btn btn-tertiary" disabled>Terciario</button>
<button type="button" class="btn btn-success" disabled>Éxito</button>
<button type="button" class="btn btn-danger" disabled>Error</button>
<button type="button" class="btn btn-light" disabled>Light</button>
Expandible
<button type="button" class="btn btn-primary btn-block">
Botón expandible
</button>
Con icono
// Icono y texto
<button type="button" class="btn btn-primary btn-sm">
<i class="bx bx-plus-circle o-icon"></i>
Botón
</button>
<button type="button" class="btn btn-primary">
<i class="bx bx-plus-circle o-icon"></i>
Botón
</button>
<button type="button" class="btn btn-primary btn-lg">
<i class="bx bx-plus-circle o-icon"></i>
Botón
</button>
// Icono
<button type="button" class="btn btn-primary btn-sm" aria-label="Botón">
<span class="material-symbols-rounded o-icon" aria-hidden="true">add_circle</span>
</button>
<button type="button" class="btn btn-primary" aria-label="Botón">
<span class="material-symbols-rounded o-icon" aria-hidden="true">add_circle</span>
</button>
<button type="button" class="btn btn-primary btn-lg" aria-label="Botón">
<span class="material-symbols-rounded o-icon" aria-hidden="true">add_circle</span>
</button>
Con spinner
<button type="button" class="btn btn-primary" disabled>
<div class="spinner-border text-primary spinner-border-sm" role="status">
<span class="sr-only">Cargando...</span>
</div>
Cargando
</button>
<button type="button" class="btn btn-secondary" disabled>
<div class="spinner-border text-secondary spinner-border-sm" role="status">
<span class="sr-only">Cargando...</span>
</div>
Cargando
</button>
<button type="button" class="btn btn-tertiary" disabled>
<div class="spinner-border text-tertiary spinner-border-sm" role="status">
<span class="sr-only">Cargando...</span>
</div>
Cargando
</button>
<button type="button" class="btn btn-success" disabled>
<div class="spinner-border text-success spinner-border-sm" role="status">
<span class="sr-only">Cargando...</span>
</div>
Cargando
</button>
<button type="button" class="btn btn-danger" disabled>
<div class="spinner-border text-danger spinner-border-sm" role="status">
<span class="sr-only">Cargando...</span>
</div>
Cargando
</button>
<button type="button" class="btn btn-light" disabled>
<div class="spinner-border text-light spinner-border-sm" role="status">
<span class="sr-only">Cargando...</span>
</div>
Cargando
</button>
Botón con borde y spinner
<button type="button" class="btn btn-outline-primary" disabled>
<div class="spinner-border text-primary spinner-border-sm" role="status">
<span class="sr-only">Cargando...</span>
</div>
Cargando
</button>
<button type="button" class="btn btn-outline-secondary" disabled>
<div class="spinner-border text-secondary spinner-border-sm" role="status">
<span class="sr-only">Cargando...</span>
</div>
Cargando
</button>
<button type="button" class="btn btn-outline-tertiary" disabled>
<div class="spinner-border text-tertiary spinner-border-sm" role="status">
<span class="sr-only">Cargando...</span>
</div>
Cargando
</button>
<button type="button" class="btn btn-outline-success" disabled>
<div class="spinner-border text-success spinner-border-sm" role="status">
<span class="sr-only">Cargando...</span>
</div>
Cargando
</button>
<button type="button" class="btn btn-outline-danger" disabled>
<div class="spinner-border text-danger spinner-border-sm" role="status">
<span class="sr-only">Cargando...</span>
</div>
Cargando
</button>
<button type="button" class="btn btn-outline-light" disabled>
<div class="spinner-border text-secondary spinner-border-sm" role="status">
<span class="sr-only">Cargando...</span>
</div>
Cargando
</button>
Botón XS - Icono
<button type="button" class="btn btn-xs" aria-label="Editar">
<span
class="material-symbols-rounded o-icon"
aria-hidden="true"
>
edit
</span>
</button>
<button type="button" class="btn btn-xs" aria-label="Editar">
<i class="bx bxs-trash-alt o-icon"></i>
</button>
<button type="button" class="btn btn-xs" aria-label="Editar">
<span
class="material-symbols-rounded o-icon"
aria-hidden="true"
>
visibility
</span>
</button>
<button type="button" class="btn btn-xs" aria-label="Editar">
<i class="bx bxs-download o-icon"></i>
</button>