# Barra de búsqueda. DESY. Sistema de diseño del Gobierno de Aragón.

## Componentes Índice de páginas

Componentes

# Barra de búsqueda

Consiste en una caja de texto que permite introducir texto. Este componente se emplea para que el usuario pueda realizar búsquedas de contenido en el sitio web o en una vista.

## Tipos [#](#tipos)

-   Con botón: La searchbar con botón está compuesta por una caja de texto y un botón con la acción ‘Buscar’ a su derecha. Este botón puede ser uno primario o secundario según si la acción de buscar es principal o no.
-   Compacta: La searchbar en su versión compacta está compuesta siempre por una caja de texto y un botón-icono (una lupa) alineado a la derecha, integrado dentro de la propia caja. También debe contar con un texto que indique la función del elemento de búsqueda (‘Buscar’ por ejemplo), que puede colocarse como label o como placeholder, según el espacio disponible para la barra de búsqueda.

## Tamaños [#](#tamaos)

-   Por defecto: Utilizar para cualquier tipo de situaciones y layouts. Siempre que sea posible se recomienda usar este tamaño por motivos de accesibilidad.
-   Pequeño: Cumplen la misma función que los de tamaño estándar, pero están dirigidos a su uso en pop-ups y otros elementos de la página que no ocupen el ancho completo de la misma, así como contenido menos relevante.

## Buenas prácticas [#](#buenas-prcticas)

-   Por lo general, no se recomienda que las barras de búsqueda ocupen todo el ancho de la página en versión desktop.
-   Al mostrar los resultados de búsqueda, se recomienda que se mantenga el texto que ha introducido el usuario en la barra de búsqueda.
-   Se recomienda que el placeholder haga referencia a lo que se va a buscar. Por ejemplo, si se trata de un buscador de personas \`Buscar por nombre, apellidos o DNI’.