diff --git a/README.md b/README.md
index c86f450f..0e38d0c7 100644
--- a/README.md
+++ b/README.md
@@ -42,7 +42,7 @@ Every day is being updated and working on **Vuesax 4**, we will announce each ne
- [x] Checkbox
- [ ] Chip
- [ ] Collapse
-- [ ] Dialogs
+- [x] Dialogs
- [ ] Divider
- [ ] Dropdown
- [ ] Images
@@ -52,8 +52,8 @@ Every day is being updated and working on **Vuesax 4**, we will announce each ne
- [ ] Navbar
- [x] Notification
- [ ] Number Input
-- [ ] Pagination
-- [ ] Popup
+- [x] Pagination
+- [x] Popup
- [ ] Progress
- [x] Radio
- [x] Select
diff --git a/packages/docs/.vuepress/components/Dialog/blur.vue b/packages/docs/.vuepress/components/Dialog/blur.vue
new file mode 100644
index 00000000..7e30a0a3
--- /dev/null
+++ b/packages/docs/.vuepress/components/Dialog/blur.vue
@@ -0,0 +1,100 @@
+
+
+ Vuesax (pronounced / vjusacksː /, as view sacks) is a framework of UI components created with Vuejs to make projects easily and with a unique and pleasant style, vuesax is created from scratch and designed for all types of developers from the frontend lover to the backend who wants to easily create their visual approach to the end-user
+
+ We are focused on streamlining the work of the programmer by giving components created in their entirety and with independent customization and very easy to implement, so creativity is in our hands but we do not neglect that each project is different both visually and in its ecosystem
+
+ Vuesax does not have a design line such as other component frameworks based on Material Design, we believe that there are already emaciated frameworks that look visually and in UI / UX and we don't want to be one more of the bunch, apart from that we love to create and design new experiences and surprise you with new elements or details that we can only do by being visually free.
+
+
+
+ Why Vuesax?
+
+
+
+ Vuesax is a relatively new framework with a refreshing design and in the latest trends, vuesax based on vuejs which means that we go hand in hand with one of the most popular javascript frameworks in the world and with a huge community with which you will have all the help and documentation to create and make your project
+
+
+ - Vuesax, unlike many frameworks, is designed from scratch and we are not anchored to any design line, this is something great since your project is going to be unique and very different from the others
+
+
+
+ - We are focused on the quick and easy creation of projects giving a beautiful visual line but without forgetting the personalization and independence of the developer
+
+
+
+ - Vuesax uses native css variables for better customization and production changes such as changing to dark theme or changing the main color of the entire application with few javascript lines
+
+
+
+ - Vuesax is a frame designed to have a great visual impact and that is always in trend with respect to design.
+
+
+
+ - An open-source community to create, improve and correct any component or function.
+
+
+
+ - Independent components to avoid importing unnecessary code.
+
+
+
+ - Markdown documents for better sustainability.
+
+
+
+ - and much more.
+
+ Vuesax is a relatively new framework with a refreshing design and in the latest trends, vuesax based on vuejs which means that we go hand in hand with one of the most popular javascript frameworks in the world and with a huge community with which you will have all the help and documentation to create and make your project
+
+
+
+
+
+
+
+
+
+
+ Welcome to Vuesax
+
+
+
+
+
+
+ Vuesax is a relatively new framework with a refreshing design and in the latest trends, vuesax based on vuejs which means that we go hand in hand with one of the most popular javascript frameworks in the world and with a huge community with which you will have all the help and documentation to create and make your project
+
+
+
+
+
+
+
+
+
+
+ Welcome what is your Name
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/docs/.vuepress/components/Notification/duration.vue b/packages/docs/.vuepress/components/Notification/duration.vue
index 70588867..475623b7 100644
--- a/packages/docs/.vuepress/components/Notification/duration.vue
+++ b/packages/docs/.vuepress/components/Notification/duration.vue
@@ -22,7 +22,7 @@ export default {
duration,
progress: 'auto',
title: 'Documentation Vuesax 4.0+',
- text: 'These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax3.x'
+ text: 'These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax3.x',
})
}
}
diff --git a/packages/docs/.vuepress/components/Pagination/buttons-dotted.vue b/packages/docs/.vuepress/components/Pagination/buttons-dotted.vue
new file mode 100644
index 00000000..ebc31d28
--- /dev/null
+++ b/packages/docs/.vuepress/components/Pagination/buttons-dotted.vue
@@ -0,0 +1,20 @@
+
+
+
+
+
+
+
+## Type
+
+You can easily create the most common types of dialogs such as **Alert**, **Confirm** or **Prompt** using the different slots for the structure of the `header`,`default`, `footer` dialog
+
+
+
+
+
+
+
+ ```html
+
+
+
+ Alert
+
+
+ Confirm
+
+
+ Prompt
+
+
+
+
+ Welcome to Vuesax
+
+
+
+
+
+
+ Vuesax is a relatively new framework with a refreshing design and in the latest trends, vuesax based on vuejs which means that we go hand in hand with one of the most popular javascript frameworks in the world and with a huge community with which you will have all the help and documentation to create and make your project
+
+
+
+
+
+
+
+
+
+
+ Welcome to Vuesax
+
+
+
+
+
+
+ Vuesax is a relatively new framework with a refreshing design and in the latest trends, vuesax based on vuejs which means that we go hand in hand with one of the most popular javascript frameworks in the world and with a huge community with which you will have all the help and documentation to create and make your project
+
+
+
+
+
+
+
+
+
+
+ Welcome what is your Name
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4,5,6}
+
+ ```
+
+
+
+
+
+ ```stylus
+
+ ```
+
+
+
+
+
+
+
+## loading
+
+Add a loading animation to the dialog with the `loading` property
+
+
+
+
+
+
+
+## Scroll
+
+There are cases where you need a scroll because there is a lot of information within the dialog for this you can use the `scroll` property
+
+
+
+
+
+
+
+ ```html
+
+
+
+ Open Dialog
+
+
+
+
+ Introduction
+
+
+
+
+ Whats is Vuesax?
+
+
+ Vuesax (pronounced / vjusacksː /, as view sacks) is a framework of UI components created with Vuejs to make projects easily and with a unique and pleasant style, vuesax is created from scratch and designed for all types of developers from the frontend lover to the backend who wants to easily create their visual approach to the end-user
+
+ We are focused on streamlining the work of the programmer by giving components created in their entirety and with independent customization and very easy to implement, so creativity is in our hands but we do not neglect that each project is different both visually and in its ecosystem
+
+ Vuesax does not have a design line such as other component frameworks based on Material Design, we believe that there are already emaciated frameworks that look visually and in UI / UX and we don't want to be one more of the bunch, apart from that we love to create and design new experiences and surprise you with new elements or details that we can only do by being visually free.
+
+
+
+ Why Vuesax?
+
+
+
+ Vuesax is a relatively new framework with a refreshing design and in the latest trends, vuesax based on vuejs which means that we go hand in hand with one of the most popular javascript frameworks in the world and with a huge community with which you will have all the help and documentation to create and make your project
+
+
+ - Vuesax, unlike many frameworks, is designed from scratch and we are not anchored to any design line, this is something great since your project is going to be unique and very different from the others
+
+
+
+ - We are focused on the quick and easy creation of projects giving a beautiful visual line but without forgetting the personalization and independence of the developer
+
+
+
+ - Vuesax uses native css variables for better customization and production changes such as changing to dark theme or changing the main color of the entire application with few javascript lines
+
+
+
+ - Vuesax is a frame designed to have a great visual impact and that is always in trend with respect to design.
+
+
+
+ - An open-source community to create, improve and correct any component or function.
+
+
+
+ - Independent components to avoid importing unnecessary code.
+
+
+
+ - Markdown documents for better sustainability.
+
+
+
+ - and much more.
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+ ```stylus
+
+ ```
+
+
+
+
+
+
+
+## Overflow Hidden Body
+
+If you need to remove the page scroll when opening the dialog you can do it with the `overflow-hidden` property
+
+
+
+
+
+
+
+## Not Padding
+
+If you need to remove the padding from the dialog to make a more personalized interface you can do it with the `not-padding` property
+
+
+
+
+
+
+
+ ```html{6}
+
+
+
+
+
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+ ```stylus
+
+ ```
+
+
+
+
+
+
+
+## Nested Dialogs
+
+You can nest as many `vs-dialog` as you need without problem
+
+
+
+
+
+
+
+## blur
+
+You can add a blur style to all the elements behind the dialog with the `blur` property, this functionality depends on the css property [backdrop-filter](https://caniuse.com/#feat=css-backdrop-filter)
+
+
+
+
+
+
+
+## Disabled
+
+Change the disabled state of the component with the `disabled` property, this property is a boolean and you can add it without value
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Not Arrows
+
+You can remove the back and next arrows with the `not-arrows` property
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Only Arrows
+
+You may need in small spaces to remove the buttons and leave only the arrows for it we have the property `only-arrows`
+
+
+
+
+
+
+
+ ```html{3,5}
+
+
+
+
+ Page: {{ page }}
+
+
+
+ ```
+
+
+
+
+
+ ```html{3,4,5}
+
+ ```
+
+
+
+
+
+
+
+## Circle
+
+Change the radius of all the elements that make up the component by making them circular with the `circle` property, this property is a boolean so it does not need value
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Square
+
+Change the radius of all the elements that make up the component making them square with the `square` property, this property is a boolean so it does not need value
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Buttons Dotted
+
+Cambia por completo el estilo de el componente y elimina los números internos en cada botón con la propiedad `buttons-dotted`
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{3,4,5}
+
+ ```
+
+
+
+
+
+
+
+## Disabled Items
+
+You can put disabled buttons specific to the pagination component with the `disabled-items` property, this property is an array with the number of the button you want to put in disabled status
+
+:::tip
+The buttons that are in disabled will skip when changing the value for example on the next or back buttons
+:::
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Loading Items
+
+You can make a button inside the pagination be in the state of loading with the `loading-items` property, this property is an array with the number of the button that you want to put in the disabled state
+
+:::tip
+The buttons that are in loading will skip when changing the value for example in the next or back buttons
+:::
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Not Margin
+
+Change the style of the entire component by removing the margin between the buttons and changing the radius with the `not-margin` property
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Slot
+
+You may need to customize your pagination and for this you can use the `default` slot between the arrows and replace the items on the pages
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ {{ numberPage }}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+ ```stylus
+
+ ```
+
+
+
+
+
+
+
+## Progress
+
+Add a progress bar to the pagination by referencing where you find the last page with the `progress` property
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Dotted Number
+
+You can change the number of pages that are added when the user clicks on the points to advance more pages quickly, this can be done with the `dotted-number` property and the value would be the number of pages that are added or subtracted ( default is **5**)
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Infinite
+
+You can make the pagination infinite with the `infinite` property, this means that the arrow buttons are no longer in the disabled state
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## API
+
+
diff --git a/packages/docs/docs/components/Tooltip.md b/packages/docs/docs/components/Tooltip.md
index 8682647a..2b6d806f 100644
--- a/packages/docs/docs/components/Tooltip.md
+++ b/packages/docs/docs/components/Tooltip.md
@@ -285,7 +285,13 @@ SLOTS:
NEWS:
- - name
+ - border
+ - square
+ - circle
+ - shadow
+ - not-arrow
+ - loading
+ - content
---
# Tooltip
diff --git a/packages/docs/es/docs/components/Dialog.md b/packages/docs/es/docs/components/Dialog.md
new file mode 100644
index 00000000..3ba7a686
--- /dev/null
+++ b/packages/docs/es/docs/components/Dialog.md
@@ -0,0 +1,1747 @@
+---
+PROPS:
+ - name: v-model
+ type: Boolean
+ values: true,false
+ description: Determina si el dialog es visible o esta oculto.
+ default: false
+ link: null
+ usage: '#default'
+ code: >
+
+ ...
+
+ - name: not-center
+ type: boolean
+ values: true.false
+ description: Por defecto el header centra los elementos, con esta propiedad se elimina el centrado.
+ default: false
+ link: null
+ usage: '#type'
+ code: >
+
+ ...
+
+ - name: width
+ type: String
+ values: px
+ description: Determina el ancho de el dialog.
+ default: null
+ link: null
+ usage: '#type'
+ code: >
+
+ ...
+
+ - name: loading
+ type: Boolean
+ values: true,false
+ description: Agrega una animación de cargando al dialog.
+ default: false
+ link: null
+ usage: '#loading'
+ code: >
+
+ ...
+
+ - name: not-close
+ type: Boolean
+ values: true,false
+ description: Elimina el botón de close de el dialog.
+ default: false
+ link: null
+ usage: '#not-close'
+ code: >
+
+ ...
+
+ - name: scroll
+ type: Boolean
+ values: true,false
+ description: Hace que el contenido tenga un máximo de alto y da posibilidad a si se desborda el contenido agregar scroll.
+ default: false
+ link: null
+ usage: '#scroll'
+ code: >
+
+ ...
+
+ - name: overflow-hidden
+ type: Boolean
+ values: true,false
+ description: Al abrirse el dialog se elimina el scroll de la pagina.
+ default: false
+ link: null
+ usage: '#overflow-hidden-body'
+ code: >
+
+ ...
+
+ - name: auto-width
+ type: Boolean
+ values: true,false
+ description: Hace que el dialog tenga un ancho automático a su contenido.
+ default: false
+ link: null
+ usage: '#scroll'
+ code: >
+
+ ...
+
+ - name: not-padding
+ type: Boolean
+ values: true,false
+ description: Elimina el padding de los elementos base de el dialog.
+ default: false
+ link: null
+ usage: '#not-padding'
+ code: >
+
+ ...
+
+ - name: full-screen
+ type: Boolean
+ values: true,false
+ description: Hace que el dialog tenga el tamaño de la ventana.
+ default: false
+ link: null
+ usage: '#full-screen'
+ code: >
+
+ ...
+
+ - name: blur
+ type: Boolean
+ values: true,false
+ description: Hace que todos los elementos tengan blur al abrirse el dialog.
+ default: false
+ link: null
+ usage: '#blur'
+ code: >
+
+ ...
+
+ - name: square
+ type: Boolean
+ values: true,false
+ description: Elimina el border radius de el dialog.
+ default: false
+ link: null
+ usage: '#square'
+ code: >
+
+ ...
+
+ - name: prevent-close
+ type: Boolean
+ values: true,false
+ description: Hace que el dialog no se pueda cerrar dando click afuera o pulsando la tecla esc.
+ default: false
+ link: null
+ usage: null
+ code: >
+
+ ...
+
+
+SLOTS:
+ - name: slot name
+ type: slot
+ values: null
+ description: texto descriptivo.
+ default: null
+ link: null
+ usage: '#animated'
+ code: >
+ ...
+
+NEWS:
+ - name
+---
+
+# Dialog
+
+
+
+## Default
+
+
+
+Genera un Dialog con el componente `vs-dialog`, este componente es muy personalizable ya que proporciona un slot para poner y hacer cualquier tipo de interfaz a la necesidad de el usuario
+
+
+
+
+
+
+
+## Type
+
+Puedes fácilmente crear los distintos tipos de dialogs mas comunes como **Alert**, **Confirm** o **Prompt** usando los diferentes slots para la estructura de el dialog `header`, `default`, `footer`
+
+
+
+
+
+
+
+ ```html
+
+
+
+ Alert
+
+
+ Confirm
+
+
+ Prompt
+
+
+
+
+ Welcome to Vuesax
+
+
+
+
+
+
+ Vuesax is a relatively new framework with a refreshing design and in the latest trends, vuesax based on vuejs which means that we go hand in hand with one of the most popular javascript frameworks in the world and with a huge community with which you will have all the help and documentation to create and make your project
+
+
+
+
+
+
+
+
+
+
+ Welcome to Vuesax
+
+
+
+
+
+
+ Vuesax is a relatively new framework with a refreshing design and in the latest trends, vuesax based on vuejs which means that we go hand in hand with one of the most popular javascript frameworks in the world and with a huge community with which you will have all the help and documentation to create and make your project
+
+
+
+
+
+
+
+
+
+
+ Welcome what is your Name
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4,5,6}
+
+ ```
+
+
+
+
+
+ ```stylus
+
+ ```
+
+
+
+
+
+
+
+## loading
+
+Agrega una animación de cargando al dialog con la propiedad `loading`
+
+
+
+
+
+
+
+## Scroll
+
+Hay casos en que necesitas un scroll porque hay mucha información dentro de el dialog para ello puedes usar la propiedad `scroll`
+
+
+
+
+
+
+
+ ```html
+
+
+
+ Open Dialog
+
+
+
+
+ Introduction
+
+
+
+
+ Whats is Vuesax?
+
+
+ Vuesax (pronounced / vjusacksː /, as view sacks) is a framework of UI components created with Vuejs to make projects easily and with a unique and pleasant style, vuesax is created from scratch and designed for all types of developers from the frontend lover to the backend who wants to easily create their visual approach to the end-user
+
+ We are focused on streamlining the work of the programmer by giving components created in their entirety and with independent customization and very easy to implement, so creativity is in our hands but we do not neglect that each project is different both visually and in its ecosystem
+
+ Vuesax does not have a design line such as other component frameworks based on Material Design, we believe that there are already emaciated frameworks that look visually and in UI / UX and we don't want to be one more of the bunch, apart from that we love to create and design new experiences and surprise you with new elements or details that we can only do by being visually free.
+
+
+
+ Why Vuesax?
+
+
+
+ Vuesax is a relatively new framework with a refreshing design and in the latest trends, vuesax based on vuejs which means that we go hand in hand with one of the most popular javascript frameworks in the world and with a huge community with which you will have all the help and documentation to create and make your project
+
+
+ - Vuesax, unlike many frameworks, is designed from scratch and we are not anchored to any design line, this is something great since your project is going to be unique and very different from the others
+
+
+
+ - We are focused on the quick and easy creation of projects giving a beautiful visual line but without forgetting the personalization and independence of the developer
+
+
+
+ - Vuesax uses native css variables for better customization and production changes such as changing to dark theme or changing the main color of the entire application with few javascript lines
+
+
+
+ - Vuesax is a frame designed to have a great visual impact and that is always in trend with respect to design.
+
+
+
+ - An open-source community to create, improve and correct any component or function.
+
+
+
+ - Independent components to avoid importing unnecessary code.
+
+
+
+ - Markdown documents for better sustainability.
+
+
+
+ - and much more.
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+ ```stylus
+
+ ```
+
+
+
+
+
+
+
+## Overflow Hidden Body
+
+Si necesitas remover el scroll de la pagina al abrir el dialog puedes hacerlo con la propiedad `overflow-hidden`
+
+
+
+
+
+
+
+## Not Padding
+
+Si necesitas remover el padding de el dialog para hacer una interfaz mas personalizada puedes hacerlo con la propiedad `not-padding`
+
+
+
+
+
+
+
+ ```html{6}
+
+
+
+
+
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+ ```stylus
+
+ ```
+
+
+
+
+
+
+
+## Nested Dialogs
+
+Puedes anidar cuantos `vs-dialog` necesites sin problema
+
+
+
+
+
+
+
+## blur
+
+Puedes agregar un estilo de blur a todos los elementos detrás de el dialog con la propiedad `blur`, esta funcionalidad depende de la propiedad css [backdrop-filter](https://caniuse.com/#feat=css-backdrop-filter)
+
+
+
+
+
+
+
+## Prevent Close
+
+Con la propiedad `prevent-close` haces que el dialog no se cierre al hacer click afuera o al pulsar la tecla **esc**
+
+
+
+
+
+
+
+## Disabled
+
+Cambia el estado disabled de el componente con la propiedad `disabled`, esta propiedad es un boolean y puedes agregarla sin valor
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Not Arrows
+
+Puedes eliminar las flechas de atrás y siguiente con la propiedad `not-arrows`
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Only Arrows
+
+Puedes necesitar en espacios reducidos eliminar los botones y dejar solo las flechas para ello tenemos la propiedad `only-arrows`
+
+
+
+
+
+
+
+ ```html{3,5}
+
+
+
+
+ Page: {{ page }}
+
+
+
+ ```
+
+
+
+
+
+ ```html{3,4,5}
+
+ ```
+
+
+
+
+
+
+
+## Circle
+
+Cambia el radius de todos los elementos que componen al componente haciendo que sean circulares con la propiedad `circle`, esta propiedad es un boolean por lo cual no necesita valor
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Square
+
+Cambia el radius de todos los elementos que componen al componente haciendo que sean cuadrados con la propiedad `square`, esta propiedad es un boolean por lo cual no necesita valor
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Buttons Dotted
+
+Cambia por completo el estilo de el componente y elimina los números internos en cada botón con la propiedad `buttons-dotted`
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{3,4,5}
+
+ ```
+
+
+
+
+
+
+
+## Disabled Items
+
+Puedes poner en estado de disabled botones específicos de el componente pagination con la propiedad `disabled-items`, esta propiedad es un array con el numero de el botón que se desea poner en estado de disabled
+
+:::tip
+Los botones que se encuentran en disabled se van a saltar al cambiar el valor por ejemplo en los botones de siguiente o atrás
+:::
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Loading Items
+
+Puedes hacer que un botón dentro de la pagination este en estado de loading con la propiedad `loading-items`, esta propiedad es un array con el numero de el botón que se desea poner en estado de disabled
+
+:::tip
+Los botones que se encuentran en loading se van a saltar al cambiar el valor por ejemplo en los botones de siguiente o atrás
+:::
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Not Margin
+
+Cambia el estilo de todo el componente eliminando el margin entre los botones y cambiando el radius con la propiedad `not-margin`
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Slot
+
+Puedes necesitar personalizar tu pagination y para ello puedes usar el slot `default` que se encuentra entre las flechas y sustituye los items de las paginas
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ {{ numberPage }}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+ ```stylus
+
+ ```
+
+
+
+
+
+
+
+## Progress
+
+Agrega una barra de progreso a la pagination haciendo referencia en donde se encuentra a la ultima pagina con la propiedad `progress`
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Dotted Number
+
+Puedes cambiar el numero de paginas que se suman cuando el usuario hace click en los puntos para avanzar mas paginas rápidamente, esto lo puedes hacer con la propiedad `dotted-number` y el valor seria el numero de paginas que se suman o se restan (por defecto es **5**)
+
+
+
+
+
+
+
+ ```html{3}
+
+
+
+
+
+ ```
+
+
+
+
+
+ ```html{4}
+
+ ```
+
+
+
+
+
+
+
+## Infinite
+
+Puedes hacer que la pagination sea infinita con la propiedad `infinite`, esto genera que ya los botones de flecha no se encuentren en estado disabled
+
+
+