# Botones y enlaces

Los botones y enlaces son uno de los componentes más utilizados e incluso se podría decir que fundamentales en la programación de cualquier aplicación para un dispositivo móvil. Para utilizarlos simplemente tenemos que añadir la clase CSS `button` a un elemento tipo `button` o a un enlace tipo `a` normal (ambos casos se mostrarán visualmente de la misma forma), por ejemplo:

```markup
<button class="button">Apriétame!</button>
<a href="index.html" class="button">Apriétame!</a>
```

Los botones también tienen una serie de estilos CSS que nos permitirán cambiar su color. Los colores incluidos son los mismos que para las cabeceras y pies de página pero con el prefijo "*button*". Estos son:

![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBWTboNM5OAN1kKRr%2Fbuttons_types.png?generation=1577179058313542\&alt=media)

Para usarlos simplemente tenemos que añadir la clase CSS deseada de la forma:

```markup
<button class="button button-positive">Apriétame!</button>
<a href="index.html" class="button button-dark">Apriétame!</a>
```

Para crear un enlace que cargue una página distinta de la actual podemos hacerlo de forma normal, poniendo la dirección de la nueva página en el campo `href`, por ejemplo:

```markup
<a href="bibliografia.html" class="button">Ir a la bibliografía</a>
```

A continuación se van a explicar algunas opciones de configuración más que podemos usar con los botones.

## Ancho del botón

Podemos variar el ancho del botón para que ocupe todo el ancho posible pero respetando el margen o *padding* definido (usando la clase `button-block`) o para que llegue hasta el borde de la pantalla eliminando los posibles márgenes (mediante la clase `button-full`). En el siguiente ejemplo se puede ver claramente la difenrencia:

![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBWTil87Q0zKG30nr%2Fbuttons_width_example.png?generation=1577179058542480\&alt=media)

Para conseguir estos botones tendríamos que escribir el siguiente código:

```markup
<button class="button button-block button-positive">
  button-block
</button>

<button class="button button-full button-positive">
  button-full
</button>
```

## Tamaño del botón

Podemos usar las clases `button-small` o `button-large` para crear botones más pequeños o más grandes, respectivamente:

```markup
<button class="button button-small button-assertive">
  Small Button
</button>
<button class="button button-large button-positive">
  Large Button
</button>
```

## Botones con iconos

Podemos añadir imágenes a los botones de forma muy sencilla usando los iconos incluidos con Ionic (llamados Ionicons, ver sección de Iconos), o también podemos añadir iconos usando otra librería. Para añadir un icono a un botón se puede realizar de distintas formas:

* Dentro del propio botón o enlace añadiendo primero una de las siguientes clases: `icon`, `icon-left` o `icon-right`, para indicar la posición del icono, y después la clase que define el icono a utilizar (ver sección Iconos).&#x20;
* También podemos añadir el icono añadiendo una etiqueta hija, dentro del botón o enlace. Esta opción es la recomendada si se usa una librería externa de iconos, como FontAwesome por ejemplo.&#x20;

A continuación se incluyen algunos ejemplos de como añadir iconos:

```markup
<button class="button">
  <i class="icon ion-home"></i> Home
</button>

<button class="button icon-left ion-star button-positive">Favorites</button>

<a class="button icon-right ion-chevron-right button-calm">Learn More</a>

<a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>

<button class="button icon ion-gear-a"></button>

<a class="button button-icon icon ion-settings"></a>

<a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>
```

Con lo que obtendríamos el siguiente resultado:

![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBWTkrs_kIPIyuiJu%2Fbuttons_icons.png?generation=1577179058445897\&alt=media)

Al aplicar la clase `button-clear` sobre el botón hacemos que se muestr únicamente el texto y el icono, quitando el borde y el fondo. Si el botón únicamente tuviera icono entonces tenemos que usar la clase `button-icon` para que solo se vea el icono.

## Botones en cabeceras o en pies de página

Para poner botones en una cabecera o pie de página simplemente tenemos que añadirlos antes o después del título, con lo cual provocaremos que el botón se coloque a la izquierda o a la derecha del título respectivamente, por ejemplo:

```markup
<ion-header-bar>
  <button class="button icon ion-navicon"></button>
  <h1 class="title">Header Buttons</h1>
  <button class="button">Edit</button>
</ion-header-bar>
```

Con lo que obtendríamos:

![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBWTm0ufKKraYstg0%2Fheader_buttons_1.png?generation=1577179058197232\&alt=media)

Si no hubiera título podemos usar la clase CSS `pull-right` para alinear el botón a la derecha de la barra:

```markup
<ion-footer-bar>
  <button class="button button-clear pull-right">Right</button>
</ion-footer-bar>
```

Al poner un botón en una cabecera o pie de página este tomará el estilo aplicado a la barra por defecto, por lo que no es necesario añadir ningún estilo más. Sin embargo si queremos le podemos aplicar algunas de las clases que hemos visto para colorear los botones.

También podemos borrar el borde y fondo del botón para que solamente se vea el icono del mismo. Para esto tenemos que añadir la clase `button-icon` en caso de que el botón solo tenga un icono o `button-clear` si tuviera texto, por ejemplo:

```markup
<ion-header-bar>
  <button class="button button-icon icon ion-navicon"></button>
  <h1 class="title">Header Buttons</h1>
  <button class="button button-clear button-positive">Edit</button>
</ion-header-bar>
```

## Barra de botones

Los botones se puede agrupar de forma muy sencilla simplemente metiéndolos dentro de un `<div>` con la clase `button-bar`, por ejemplo:

```markup
<div class="button-bar">
  <a class="button">First</a>
  <a class="button">Second</a>
  <a class="button">Third</a>
</div>
```

Con lo que obtendríamos:

![](https://4180708432-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwrBJxsH1hechL6qBM3%2F-LwrBLQQlaazlSYkKJHB%2F-LwrBWToEHpsYTuxkNVt%2Fbuttons_button_bar.png?generation=1577179058612227\&alt=media)

Estas barras de botones se puede utilizar también en cabeceras y en pies de página.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ajgallego.gitbook.io/ionic/componentes/componentes_botones.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.