es-docs: add alert, badge, breadcrumb, button translation (#8090)

* docs/es/alert.md - translation to spanish

* docs/es/alert.md - translation to spanish

* docs/es/badge.md - translation to spanish

* docs/es/breadcrumb.md - translation to spanish

* docs/es/button.md - translation to spanish

examples/docs/es/alert.md

@@ -19,13 +19,13 @@
 
 ## Alert
 
-Displays important alert messages.
+Mostrar mensajes de alertas importantes.
 
-### Basic usage
+### Uso básico
 
-Alert components are non-overlay elements in the page that does not disappear automatically.
+Los componentes de alertas no son elementos overlay de la página y no desaparecen automáticamente.
 
-::: demo Alert provides 4 types of themes defined by `type`, whose default value is `info`.
+::: demo Alert provee 4 tipos de temas definidos por `type`, el valor por defecto es `info`.
 
 ```html
 <template>
@@ -49,11 +49,12 @@ Alert components are non-overlay elements in the page that does not disappear au
 ```
 :::
 
-### Customizable close button
+### Customización del botón de cerrar 
 
-Customize the close button as texts or other symbols.
+Customizá el botón de cerrar como texto u otros símbolos.
+
+::: demo Alert permite configurar si es posible cerrarla. El texto del botón de cerrado, así como los callbacks de cerrado son customizables. El atributo `closable` define si el componente puede cerrarse o no. Acepta un `boolean`, que por defecto es `true`. También puedes configurar el atributo `close-text` para reemplazar el símbolo de cerrado que se muestra por defecto. Ten cuidado que el atributo `close-text` debe ser un string. El evento `close` se dispara cuando el componente se cierra.
 
-::: demo Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. `closable` attribute decides if the component can be closed or not. It accepts `boolean`, and the default is `true`. You can set `close-text` attribute to replace the default cross symbol as the close button. Be careful that `close-text` must be a string. `close` event fires when the component is closed.
 
 ```html
 <template>
@@ -86,11 +87,12 @@ Customize the close button as texts or other symbols.
 ```
 :::
 
-### With icon
+### Usar iconos
+
+Mostrar un icono mejora la legibilidad.
 
-Displaying an icon improves readability.
+::: demo Setear el atributo `show-icon` muestra un icono que corresponde al tipo de Alert que se está mostrando.
 
-::: demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type.
 
 ```html
 <template>
@@ -118,9 +120,9 @@ Displaying an icon improves readability.
 ```
 :::
 
-## Centered text
+### Texto centrado
 
-Use the `center` attribute to center the text.
+Para centrar el texto utilice el atributo `center`.
 
 ::: demo
 
@@ -154,11 +156,11 @@ Use the `center` attribute to center the text.
 ```
 :::
 
-### With description
+### Con descripción
 
-Description includes a message with more detailed information.
+Descripción incluye un mensaje con información más detallada.
 
-::: demo Besides the required `title` attribute, you can add a `description` attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.
+::: demo Además del atributo requerido `title`, se puede agregar el atributo `description` para ayudar a describir la alerta con mas detalles. La descripción puede contener solamente un string y va a usar word wrap automáticamente.
 
 ```html
 <template>
@@ -171,9 +173,9 @@ Description includes a message with more detailed information.
 ```
 :::
 
-### With icon and description
+### Utilizando icono y descripción
 
-::: demo At last, this is an example with both icon and description.
+::: demo Finalmente este es un ejemplo utilizando icono y descripción.
 
 ```html
 <template>
@@ -205,19 +207,19 @@ Description includes a message with more detailed information.
 ```
 :::
 
-### Attributes
-| Attribute      | Description          | Type      | Accepted Values       | Default  |
+### Atributos
+| Atributo      | Descrpción          | Tipo      | Valores válidos       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| **title** | title **REQUIRED** | string | — | — |
-| type | component type | string | success/warning/info/error | info |
-| description | descriptive text. Can also be passed with the default slot | string | — | — |
-| closable | if closable or not | boolean | — | true |
-| center | whether to center the text | boolean | — | false |
-| close-text | customized close button text | string | — | — |
-| show-icon | if a type icon is displayed | boolean | — | false |
+| **title** | Título **REQUIRED** | string | — | — |
+| type | tipo de componente | string | success/warning/info/error | info |
+| description | texto descriptivo. También puede ser pasado con el slot por defecto | string | — | — |
+| closable | si se puede cerrar o no | boolean | — | true |
+| center | si el texto debe estar centrado | boolean | — | false |
+| close-text | texto de cerrado customizado | string | — | — |
+| show-icon | si un icono del tipo de alerta se debe mostrar| boolean | — | false |
 
 
-### Events
-| Event Name | Description | Parameters |
+### Eventos
+| Nombre del evento | Descripción | Parámetros |
 |---------- |-------- |---------- |
-| close | fires when alert is closed | — |
+| close | Se dispara cuando la alerta se cierra | — |

examples/docs/es/badge.md

@@ -1,12 +1,12 @@
 ## Badge
 
-A number or status mark on buttons and icons.
+Marcas en forma de número o estado para botones e iconos.
 
-### Basic usage
+### Uso básico
 
-Displays the amount of new messages.
+Muestra la cantidad de mensajes nuevos.
 
-:::demo The amount is defined with `value` which accepts `Number` or `String`.
+:::demo La cantidad está definida por `value` que acepta `Number` o `String`.
 
 ```html
 <el-badge :value="12" class="item">
@@ -41,11 +41,11 @@ Displays the amount of new messages.
 ```
 :::
 
-### Max value
+### Valor máximo
 
-You can customize the max value.
+Se puede customizar el valor máximo.
 
-::: demo The max value is defined by property `max` which is a `Number`. Note that it only works when `value` is also a `Number`.
+::: demo El valor máximo se define como `max` el cual es un `Number`. Nota: solo funciona si `value` es también un `Number`.
 
 ```html
 <el-badge :value="200" :max="99" class="item">
@@ -64,11 +64,11 @@ You can customize the max value.
 ```
 :::
 
-### Customizations
+### Customizaciones
 
-Displays text content other than numbers.
+Mostrar texto en vez de números.
 
-:::demo When `value` is a `String`, it can display customized text.
+:::demo Cuando `value` es un `String`, puede mostrar texto customizado.
 
 ```html
 <el-badge value="new" class="item">
@@ -87,11 +87,11 @@ Displays text content other than numbers.
 ```
 :::
 
-### Little red dot
+### Pequeño punto rojo
 
-Use a red dot to mark content that needs to be noticed.
+Puede utilizar un punto rojo para marcar contenido que debe ser notado.
 
-:::demo Use the attribute `is-dot`. It is a `Boolean`.
+:::demo Use el atributo `is-dot`. Es un `Boolean`.
 
 ```html
 <el-badge is-dot class="item">query</el-badge>
@@ -129,10 +129,10 @@ Use a red dot to mark content that needs to be noticed.
   }
 </style>
 
-### Attributes
-| Attribute          | Description            | Type            | Accepted Values                 | Default   |
+### Atributos
+| Atributo          | Descripción            | Tipo            | Valores aceptados                 | Default   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
-| value          | display value      | string, number          |          —             |    —     |
-| max          |  maximum value, shows '{max}+' when exceeded. Only works if `value` is a `Number`   | number  |         —              |     —    |
-| is-dot       | if a little dot is displayed   | boolean  |  —  |  false |
+| value          | valor a mostrar      | string, number          |          —             |    —     |
+| max          |  valor máximo, Muestra '{max}+' cuando se excede. Solo funciona si `value` es un `Number`   | number  |         —              |     —    |
+| is-dot       | si se debe mostrar un pequeño punto  | boolean  |  —  |  false |
 | hidden | hidden badge | boolean | — | false |

examples/docs/es/breadcrumb.md

@@ -1,11 +1,11 @@
 ## Breadcrumb
 
-Displays the location of the current page, making it easier to browser back.
+Muestra la locación de la página actual, haciendo más fácil el poder ir a la página anterior.
 
-### Basic usage
+### Uso básico
 
 
-:::demo In `el-breadcrumb`, each `el-breadcrumb-item` is a tag that stands for every level starting from homepage. This component has a `String` attribute `separator`, and it determines the separator. Its default value is '/'.
+:::demo En `el-breadcrumb`, cada `el-breadcrumb-item` es un tag que representa cada nivel empezando desde la homepage. Este componente tiene un atributo `String` llamado `separator`, el mismo determina el caracter separador. El valor por defecto es '/'.
 
 ```html
 <el-breadcrumb separator="/">
@@ -17,9 +17,9 @@ Displays the location of the current page, making it easier to browser back.
 ```
 :::
 
-### Icon separator
+### Icono separador
 
-:::demo Set `separator-class` to use `iconfont` as the separator，it will cover `separator`
+:::demo Setea `separator-class` para que utilice `iconfont` como separador，el mismo va a cubrir `separator`
 
 ```html
 <el-breadcrumb separator-class="el-icon-arrow-right">
@@ -31,17 +31,17 @@ Displays the location of the current page, making it easier to browser back.
 ```
 :::
 
-### Breadcrumb Attributes
-| Attribute      | Description          | Type      | Accepted Values            | Default|
+### Breadcrumb atributos
+| Atributo      | Descripción          | Tipo      | Valores aceptados           | Default|
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| separator | separator character | string | — | / |
-| separator-class | class name of icon separator | string | — | - |
+| separator | caracter separador | string | — | / |
+| separator-class | nombre de la clase del icono separador | string | — | - |
 
-### Breadcrumb Item Attributes
-| Attribute      | Description          | Type      | Accepted Values            | Default|
+### Breadcrumb Item atributos
+| Atributo      | Descripción          | Tipo      | Valores aceptados            | Default|
 |---------- |-------------- |---------- |--------------------------------  |-------- |
-| to | target route of the link, same as `to` of `vue-router` | string/object | — | — |
-| replace | if `true`, the navigation will not leave a history record | boolean | — | false |
+| to | ruta del link, lo mismo que `to` de `vue-router` | string/object | — | — |
+| replace | si `true`,  la navegación no dejara una entrada en la historia | boolean | — | false |
 
 
 

examples/docs/es/button.md

@@ -22,11 +22,11 @@
 
 ## Button
 
-Commonly used button.
+Botones comúnmente usados.
 
-### Basic usage
+### Uso básico
 
-::: demo Use `type`, `plain` and `round` to define Button's style.
+::: demo Use `type`, `plain` y `round` para definir estilos a los botones.
 
 ```html
 <div>
@@ -58,11 +58,11 @@ Commonly used button.
 ```
 :::
 
-### Disabled Button
+### Botón deshabilitado
 
-The `disabled` attribute determines if the button is disabled.
+El atributo `disabled` determina su un botón esta deshabilitado.
 
-:::demo Use `disabled` attribute to determine whether a button is disabled. It accepts a `Boolean` value.
+:::demo Use el atributo `disabled` para determinar si un botón esta deshabilitado. Acepta un valor `Boolean`.
 
 ```html
 <div>
@@ -85,9 +85,9 @@ The `disabled` attribute determines if the button is disabled.
 ```
 :::
 
-### Text Button
+### Botón de texto
 
-Buttons without border and background.
+Botones sin borde ni fondo.
 
 :::demo
 ```html
@@ -96,11 +96,11 @@ Buttons without border and background.
 ```
 :::
 
-### Icon Button
+### Botón icono
 
-Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.
+Use iconos para darle mayor significado a Button. Se puede usar simplemente un icono o un icono con texto.
 
-:::demo Use the `icon` attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an `<i>` tag. Custom icons can be used as well.
+:::demo Use el atributo `icon` para agregar un icono. Puede encontrar el listado de iconos en el componente de iconos. Agregar iconos a la derecha del texto se puede conseguir con un tag `<i>`. También se pueden usar iconos custom.
 
 ```html
 <el-button type="primary" icon="el-icon-edit"></el-button>
@@ -111,11 +111,11 @@ Use icons to add more meaning to Button. You can use icon alone to save some spa
 ```
 :::
 
-### Button Group
+### Grupo de botones
 
-Displayed as a button group, can be used to group a series of similar operations.
+Mostrar un grupo de botones puede ser usado para mostrar un grupo de operaciones similares.
 
-:::demo Use tag `<el-button-group>` to group your buttons.
+:::demo Use el tag `<el-button-group>` para agrupar sus botones.
 
 ```html
 <el-button-group>
@@ -130,22 +130,22 @@ Displayed as a button group, can be used to group a series of similar operations
 ```
 :::
 
-### Loading Button
+### Botón de descarga 
 
-Click the button to load data, then the button displays a loading state.
+Cuando se hace clic en un botón para descargar datos, el botón muestra un estado de descarga.
 
-:::demo Set `loading` attribute to `true` to display loading state.
+:::demo Sete el atributo `loading` a `true` para mostrar el estado de descarga.
 
 ```html
 <el-button type="primary" :loading="true">Loading</el-button>
 ```
 :::
 
-### Sizes
+### Tamaños
 
-Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
+Además del tamaño por defecto, el componente Button provee tres tamaños adicionales para utilizar en diferentes escenarios.
 
-:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
+:::demo Use el atributo `size` para setear tamaños adicionales con `medium`, `small` or `mini`.
 
 ```html
 <div>
@@ -163,15 +163,15 @@ Besides default size, Button component provides three additional sizes for you t
 ```
 :::
 
-### Attributes
-| Attribute      | Description    | Type      | Accepted values       | Default   |
+### Atributos
+| Atributo      | Descripción    | Tipo      | Valores aceptados      | Default   |
 |---------- |-------- |---------- |-------------  |-------- |
-| size     | button size   | string  |   medium / small / mini            |    —     |
-| type     | button type   | string    |   primary / success / warning / danger / info / text |     —    |
-| plain     | determine whether it's a plain button   | boolean    | — | false   |
-| round     | determine whether it's a round button   | boolean    | — | false   |
-| loading   | determine whether it's loading   | boolean    | — | false   |
-| disabled  | disable the button    | boolean   | —   | false   |
-| icon  | icon class name | string   |  —  |  —  |
-| autofocus  | same as native button's `autofocus` | boolean   |  —  |  false  |
-| native-type | same as native button's `type` | string | button / submit / reset | button |
+| size     | tamaño del botón   | string  |   medium / small / mini            |    —     |
+| type     | tipo de botón  | string    |   primary / success / warning / danger / info / text |     —    |
+| plain     | determinar si es o no un botón plano   | boolean    | — | false   |
+| round     | determinar si es o no un botón redondo   | boolean    | — | false   |
+| loading   | determinar si es o no un botón de descarga   | boolean    | — | false   |
+| disabled  | deshabilitar el botón   | boolean   | —   | false   |
+| icon  | nombre de la clase del icono | string   |  —  |  —  |
+| autofocus  | misma funcionalidad que la nativa `autofocus` | boolean   |  —  |  false  |
+| native-type | misma funcionalidad que la nativa `type` | string | button / submit / reset | button |