diff --git a/api-generator/components/colorpicker.js b/api-generator/components/colorpicker.js
index d28d87a9b..31a4a5f40 100644
--- a/api-generator/components/colorpicker.js
+++ b/api-generator/components/colorpicker.js
@@ -67,10 +67,38 @@ const ColorPickerProps = [
     }
 ];
 
+const ColorPickerEvents = [
+    {
+        name: "change",
+        description: "Callback to invoke when a color is selected.",
+        arguments: [
+            {
+                name: "event.originalEvent",
+                type: "object",
+                description: "Original event"
+            },
+            {
+                name: "event.value",
+                type: "any",
+                description: "Selected color"
+            }
+        ]
+    },
+    {
+        name: "show",
+        description: "Callback to invoke when popup is shown."
+    },
+    {
+        name: "hide",
+        description: "Callback to invoke when popup is hidden."
+    }
+];
+
 module.exports = {
     colorpicker: {
         name: "ColorPicker",
         description: "ColorPicker is an input component to select a color.",
-        props: ColorPickerProps
+        props: ColorPickerProps,
+        events: ColorPickerEvents
     }
 };
diff --git a/api-generator/components/selectbutton.js b/api-generator/components/selectbutton.js
index 4cf18d16c..9ce34fdf0 100644
--- a/api-generator/components/selectbutton.js
+++ b/api-generator/components/selectbutton.js
@@ -56,6 +56,22 @@ const SelectButtonProps = [
 ];
 
 const SelectButtonEvents = [
+    {
+        name: "change",
+        description: "Callback to invoke on value change.",
+        arguments: [
+            {
+                name: "event.originalEvent",
+                type: "object",
+                description: "Browser event"
+            },
+            {
+                name: "event.value",
+                type: "any",
+                description: "Single value or an array of values that are selected."
+            }
+        ]
+    },
     {
         name: "focus",
         description: "Callback to invoke on focus.",
diff --git a/src/components/calendar/Calendar.d.ts b/src/components/calendar/Calendar.d.ts
index 202469637..1d38fa6d7 100755
--- a/src/components/calendar/Calendar.d.ts
+++ b/src/components/calendar/Calendar.d.ts
@@ -10,6 +10,7 @@ interface CalendarProps {
     showIcon?: boolean;
     icon?: string;
     numberOfMonths?: number;
+    responsiveOptions?: any[];
     view?: string;
     touchUI?: boolean;
     monthNavigator?: boolean;
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 5ffb617a6..c634e147d 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -11,14 +11,14 @@
                             <div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year">
                                 <div class="p-datepicker-header">
                                     <slot name="header"></slot>
-                                    <button class="p-datepicker-prev p-link" v-if="groupIndex === 0" @click="onPrevButtonClick" type="button" @keydown="onContainerButtonKeydown" v-ripple :disabled="$attrs.disabled">
+                                    <button class="p-datepicker-prev p-link" v-show="groupIndex === 0" @click="onPrevButtonClick" type="button" @keydown="onContainerButtonKeydown" v-ripple :disabled="$attrs.disabled">
                                         <span class="p-datepicker-prev-icon pi pi-chevron-left"></span>
                                     </button>
                                     <div class="p-datepicker-title">
-                                        <button type="button" @click="switchToMonthView" v-if="currentView === 'date'" class="p-datepicker-month p-link" :disabled="$attrs.disabled">
+                                        <button type="button" @click="switchToMonthView" v-if="currentView === 'date'" class="p-datepicker-month p-link" :disabled="switchViewButtonDisabled">
                                             {{getMonthName(month.month)}}
                                         </button>
-                                        <button type="button" @click="switchToYearView" v-if="currentView !== 'year'" class="p-datepicker-year p-link" :disabled="$attrs.disabled">
+                                        <button type="button" @click="switchToYearView" v-if="currentView !== 'year'" class="p-datepicker-year p-link" :disabled="switchViewButtonDisabled">
                                             {{currentYear}}
                                         </button>
                                         <span class="p-datepicker-decade" v-if="currentView === 'year'">
@@ -27,7 +27,7 @@
                                             </slot>
                                         </span>
                                     </div>
-                                    <button class="p-datepicker-next p-link" v-if="numberOfMonths === 1 ? true : (groupIndex === numberOfMonths - 1)"
+                                    <button class="p-datepicker-next p-link" v-show="numberOfMonths === 1 ? true : (groupIndex === numberOfMonths - 1)"
                                         @click="onNextButtonClick" type="button" @keydown="onContainerButtonKeydown" v-ripple :disabled="$attrs.disabled">
                                         <span class="p-datepicker-next-icon pi pi-chevron-right"></span>
                                     </button>
@@ -142,7 +142,7 @@
 </template>
 
 <script>
-import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils} from 'primevue/utils';
+import {ConnectedOverlayScrollHandler,DomHandler,ZIndexUtils,UniqueComponentId} from 'primevue/utils';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import InputText from 'primevue/inputtext';
 import Button from 'primevue/button';
@@ -186,6 +186,7 @@ export default {
             type: Number,
             default: 1
         },
+        responsiveOptions: Array,
         view: {
             type: String,
             default: 'date'
@@ -320,9 +321,15 @@ export default {
         this.updateCurrentMetaData();
     },
     mounted() {
-        if (this.inline && !this.$attrs.disabled) {
-            this.initFocusableCell();
-            this.overlay.style.width = DomHandler.getOuterWidth(this.$el) + 'px';
+        this.createResponsiveStyle();
+
+        if (this.inline) {
+            this.overlay && this.overlay.setAttribute(this.attributeSelector, '');
+
+            if (!this.$attrs.disabled) {
+                this.initFocusableCell();
+                this.overlay.style.width = DomHandler.getOuterWidth(this.$el) + 'px';
+            }
         }
     },
     updated() {
@@ -343,8 +350,9 @@ export default {
         }
 
         if (this.mask) {
-            this.destroyMask();
+           this.destroyMask();
         }
+        this.destroyResponsiveStyleElement();
 
         this.unbindOutsideClickListener();
         this.unbindResizeListener();
@@ -383,6 +391,14 @@ export default {
             if (this.overlay) {
                 setTimeout(this.updateFocus, 0);
             }
+        },
+        numberOfMonths() {
+            this.destroyResponsiveStyleElement();
+            this.createResponsiveStyle();
+        },
+        responsiveOptions() {
+            this.destroyResponsiveStyleElement();
+            this.createResponsiveStyle();
         }
     },
     methods: {
@@ -551,12 +567,15 @@ export default {
             return validMin && validMax && validDate && validDay;
         },
         onOverlayEnter(el) {
+            el.setAttribute(this.attributeSelector, '');
+
             if (this.autoZIndex) {
                 if (this.touchUI)
                     ZIndexUtils.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal);
                 else
                     ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay);
             }
+
             this.alignOverlay();
             this.$emit('show');
         },
@@ -756,7 +775,7 @@ export default {
                     else {
                         this.overlay.style.width = DomHandler.getOuterWidth(this.$el) + 'px';
                     }
-                    
+
                     DomHandler.absolutePosition(this.overlay, this.$el);
                 }
             }
@@ -2116,6 +2135,53 @@ export default {
                     target: this.$el
                 });
             }
+        },
+        createResponsiveStyle() {
+            if (this.numberOfMonths > 1 && this.responsiveOptions) {
+                if (!this.responsiveStyleElement) {
+                    this.responsiveStyleElement = document.createElement('style');
+                    this.responsiveStyleElement.type = 'text/css';
+                    document.body.appendChild(this.responsiveStyleElement);
+                }
+
+                let innerHTML = '';
+                if (this.responsiveOptions) {
+                    let responsiveOptions = [...this.responsiveOptions]
+                        .filter(o => !!(o.breakpoint && o.numMonths))
+                        .sort((o1, o2) => -1 * o1.breakpoint.localeCompare(o2.breakpoint, undefined, { numeric: true }));
+
+                    for (let i = 0; i < responsiveOptions.length; i++) {
+                        let { breakpoint, numMonths } = responsiveOptions[i];
+                        let styles = `
+                            .p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${numMonths}) .p-datepicker-next {
+                                display: inline-flex !important;
+                            }
+                        `;
+
+                        for (let j = numMonths; j < this.numberOfMonths; j++) {
+                            styles += `
+                                .p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${j + 1}) {
+                                    display: none !important;
+                                }
+                            `
+                        }
+
+                        innerHTML += `
+                            @media screen and (max-width: ${breakpoint}) {
+                                ${styles}
+                            }
+                        `
+                    }
+                }
+
+                this.responsiveStyleElement.innerHTML = innerHTML;
+            }
+		},
+        destroyResponsiveStyleElement() {
+            if (this.responsiveStyleElement) {
+                this.responsiveStyleElement.remove();
+                this.responsiveStyleElement = null;
+            }
         }
     },
     computed: {
@@ -2315,6 +2381,12 @@ export default {
         },
         appendTarget() {
             return this.appendDisabled ? null : this.appendTo;
+        },
+        attributeSelector() {
+            return UniqueComponentId();
+        },
+        switchViewButtonDisabled() {
+            return this.numberOfMonths > 1 || this.$attrs.disabled;
         }
     },
     components: {
@@ -2331,6 +2403,7 @@ export default {
 .p-calendar {
     position: relative;
     display: inline-flex;
+    max-width: 100%;
 }
 
 .p-calendar .p-inputtext {
@@ -2372,6 +2445,7 @@ export default {
 .p-datepicker-inline {
     display: inline-block;
     position: static;
+    overflow-x: auto;
 }
 
 /* Header */
@@ -2400,6 +2474,10 @@ export default {
     display: flex;
 }
 
+.p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {
+    flex: 1 1 auto;
+}
+
 /* DatePicker Table */
 .p-datepicker table {
 	width: 100%;
diff --git a/src/components/colorpicker/ColorPicker.d.ts b/src/components/colorpicker/ColorPicker.d.ts
index 4d0017202..7845290bf 100755
--- a/src/components/colorpicker/ColorPicker.d.ts
+++ b/src/components/colorpicker/ColorPicker.d.ts
@@ -15,6 +15,9 @@ interface ColorPickerProps {
 declare class ColorPicker {
     $props: ColorPickerProps;
     $emit(eventName: 'update:modelValue', value: any): this;
+    $emit(eventName: 'change', event: {originalEvent: Event, value: any}): this;
+    $emit(eventName: 'show'): this;
+    $emit(eventName: 'hide'): this;
 }
 
 export default ColorPicker;
diff --git a/src/components/colorpicker/ColorPicker.vue b/src/components/colorpicker/ColorPicker.vue
index 8516b47c6..9f0cea5df 100755
--- a/src/components/colorpicker/ColorPicker.vue
+++ b/src/components/colorpicker/ColorPicker.vue
@@ -29,7 +29,7 @@ import OverlayEventBus from 'primevue/overlayeventbus';
 
 export default {
     name: 'ColorPicker',
-    emits: ['update:modelValue'],
+    emits: ['update:modelValue', 'change', 'show', 'hide'],
     props: {
         modelValue: {
             type: null,
@@ -141,6 +141,7 @@ export default {
             this.updateColorHandle();
             this.updateInput();
             this.updateModel();
+            this.$emit('change', {event: event, value: this.modelValue});
         },
         pickHue(event) {
             let top = this.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
@@ -155,6 +156,7 @@ export default {
             this.updateHue();
             this.updateModel();
             this.updateInput();
+            this.$emit('change', {event: event, value: this.modelValue});
         },
         updateModel() {
             switch(this.format) {
@@ -354,12 +356,15 @@ export default {
             if (this.autoZIndex) {
                 ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
             }
+            
+            this.$emit('show');
         },
         onOverlayLeave() {
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
             this.unbindResizeListener();
             this.clearRefs();
+            this.$emit('hide');
         },
         onOverlayAfterLeave(el) {
             if (this.autoZIndex) {
diff --git a/src/components/common/Common.css b/src/components/common/Common.css
index ec0f14b66..aa19ab3ff 100755
--- a/src/components/common/Common.css
+++ b/src/components/common/Common.css
@@ -93,6 +93,10 @@ button {
     user-select: none;
 }
 
+.p-link:disabled {
+	cursor: default;
+}
+
 /* Non vue overlay animations */
 .p-connected-overlay {
     opacity: 0;
@@ -161,4 +165,4 @@ button {
     position: absolute;
     width: 1px;
     word-wrap: normal !important;
-}
\ No newline at end of file
+}
diff --git a/src/components/selectbutton/SelectButton.d.ts b/src/components/selectbutton/SelectButton.d.ts
index 06a9c9c90..b5fa64f26 100755
--- a/src/components/selectbutton/SelectButton.d.ts
+++ b/src/components/selectbutton/SelectButton.d.ts
@@ -18,6 +18,7 @@ interface SelectButtonOptionSlotInterface {
 declare class SelectButton {
     $props: SelectButtonProps;
     $emit(eventName: 'update:modelValue', value: any): this;
+    $emit(eventName: 'change', event: {originalEvent: Event, value: any}): this;
     $emit(eventName: 'focus', event: Event): this;
     $emit(eventName: 'blur', event: Event): this;
     $slots: {
diff --git a/src/components/selectbutton/SelectButton.vue b/src/components/selectbutton/SelectButton.vue
index 22cc0cb88..61dd4c195 100755
--- a/src/components/selectbutton/SelectButton.vue
+++ b/src/components/selectbutton/SelectButton.vue
@@ -17,7 +17,7 @@ import Ripple from 'primevue/ripple';
 
 export default {
     name: 'SelectButton',
-    emits: ['update:modelValue', 'focus', 'blur'],
+    emits: ['update:modelValue', 'focus', 'blur', 'change'],
     props: {
         modelValue: null,
         options: Array,
@@ -62,6 +62,7 @@ export default {
             }
 
             this.$emit('update:modelValue', newValue);
+            this.$emit('change', {event: event, value: newValue});
         },
         isSelected(option) {
             let selected = false;
diff --git a/src/views/calendar/CalendarDemo.vue b/src/views/calendar/CalendarDemo.vue
index 6ce5f1029..15ac05b99 100755
--- a/src/views/calendar/CalendarDemo.vue
+++ b/src/views/calendar/CalendarDemo.vue
@@ -62,7 +62,7 @@
                     </div>
                     <div class="p-field p-col-12 p-md-4">
                         <label for="multiplemonths">Multiple Months</label>
-                        <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
+                        <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
                     </div>
                     <div class="p-field p-col-12 p-md-4">
                         <label for="datetemplate">Date Template</label>
@@ -131,7 +131,17 @@ export default {
             dates2: null,
             minDate: null,
             maxDate: null,
-            invalidDates: null
+            invalidDates: null,
+            responsiveOptions: [
+                {
+					breakpoint: '1400px',
+					numMonths: 2
+				},
+				{
+					breakpoint: '1200px',
+					numMonths: 1
+				}
+			]
         }
     },
 	components: {
@@ -144,4 +154,4 @@ export default {
 .special-day {
     text-decoration: line-through;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index 136b086fe..1be290e0a 100755
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -241,6 +241,12 @@ export default {
                         <td>1</td>
                         <td>Number of months to display.</td>
                     </tr>
+                    <tr>
+                        <td>responsiveOptions</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>An array of options for responsive design.</td>
+                    </tr>
                     <tr>
                         <td>view</td>
                         <td>string</td>
@@ -656,7 +662,7 @@ export default {
             </div>
             <div class="p-field p-col-12 p-md-4">
                 <label for="multiplemonths">Multiple Months</label>
-                <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
+                <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
             </div>
             <div class="p-field p-col-12 p-md-4">
                 <label for="datetemplate">Date Template</label>
@@ -719,7 +725,17 @@ export default {
             dates2: null,
             minDate: null,
             maxDate: null,
-            invalidDates: null
+            invalidDates: null,
+            responsiveOptions: [
+                {
+					breakpoint: '1400px',
+					numMonths: 2
+				},
+				{
+					breakpoint: '1200px',
+					numMonths: 1
+				}
+			]
         }
     }
 }
@@ -789,7 +805,7 @@ export default {
             </div>
             <div class="p-field p-col-12 p-md-4">
                 <label for="multiplemonths">Multiple Months</label>
-                <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
+                <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
             </div>
             <div class="p-field p-col-12 p-md-4">
                 <label for="datetemplate">Date Template</label>
@@ -843,6 +859,16 @@ export default {
         const date14 = ref();
         const dates1 = ref();
         const dates2 = ref();
+        const responsiveOptions = ref([
+            {
+                breakpoint: '1400px',
+                numMonths: 2
+            },
+            {
+                breakpoint: '1200px',
+                numMonths: 1
+            }
+        ]);
 
         minDate.value.setMonth(prevMonth);
         minDate.value.setFullYear(prevYear);
@@ -854,7 +880,7 @@ export default {
         invalidDates.value = [today, invalidDate];
 
         return { minDate, maxDate, invalidDates, date1, date2, date3, date4, date5, date6, date7,
-            date8, date9, date10, date11, date12, date13, date14, dates1, dates2 }
+            date8, date9, date10, date11, date12, date13, date14, dates1, dates2, responsiveOptions }
     }
 }
 <\\/script>
@@ -922,7 +948,7 @@ export default {
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="multiplemonths">Multiple Months</label>
-                    <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" />
+                    <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
                 </div>
                 <div class="p-field p-col-12 p-md-4">
                     <label for="datetemplate">Date Template</label>
@@ -975,6 +1001,16 @@ export default {
                 const date14 = ref();
                 const dates1 = ref();
                 const dates2 = ref();
+                const responsiveOptions = ref([
+                    {
+                        breakpoint: '1400px',
+                        numMonths: 2
+                    },
+                    {
+                        breakpoint: '1200px',
+                        numMonths: 1
+                    }
+                ]);
 
                 minDate.value.setMonth(prevMonth);
                 minDate.value.setFullYear(prevYear);
@@ -986,7 +1022,7 @@ export default {
                 invalidDates.value = [today, invalidDate];
 
                 return { minDate, maxDate, invalidDates, date1, date2, date3, date4, date5, date6, date7,
-                    date8, date9, date10, date11, date12, date13, date14, dates1, dates2 }
+                    date8, date9, date10, date11, date12, date13, date14, dates1, dates2, responsiveOptions }
             },
             components: {
                 "p-calendar": primevue.calendar
diff --git a/src/views/colorpicker/ColorPickerDoc.vue b/src/views/colorpicker/ColorPickerDoc.vue
index fe265ad57..24e6d5918 100755
--- a/src/views/colorpicker/ColorPickerDoc.vue
+++ b/src/views/colorpicker/ColorPickerDoc.vue
@@ -122,6 +122,38 @@ export default {
             </table>
         </div>
 
+        <h5>Events</h5>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>event.originalEvent: Browser event <br >
+                            event.value: Selected color
+                        </td>
+                        <td>Callback to invoke when a color is selected.</td>
+                    </tr>
+                    <tr>
+                        <td>show</td>
+                        <td>-</td>
+                        <td>Callback to invoke when popup is shown.</td>
+                    </tr>
+                    <tr>
+                        <td>hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke when popup is hidden.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
         <h5>Styling</h5>
         <p>Following is the list style classed of the component.</p>
         <div class="doc-tablewrapper">
diff --git a/src/views/confirmdialog/ConfirmDialogDemo.vue b/src/views/confirmdialog/ConfirmDialogDemo.vue
index 68f021b02..d6464615e 100644
--- a/src/views/confirmdialog/ConfirmDialogDemo.vue
+++ b/src/views/confirmdialog/ConfirmDialogDemo.vue
@@ -24,14 +24,14 @@
                         <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
                     </div>
                     <div class="p-col">
-                        <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></Button>
+                        <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></Button>
                         <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
-                        <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
+                        <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
                     </div>
                     <div class="p-col">
-                        <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></Button>
+                        <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></Button>
                         <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
-                        <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
+                        <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
                     </div>
                 </div>
             </div>
diff --git a/src/views/confirmdialog/ConfirmDialogDoc.vue b/src/views/confirmdialog/ConfirmDialogDoc.vue
index b17e807df..8338644a4 100644
--- a/src/views/confirmdialog/ConfirmDialogDoc.vue
+++ b/src/views/confirmdialog/ConfirmDialogDoc.vue
@@ -281,14 +281,14 @@ export default {
                     <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
                 </div>
                 <div class="p-col">
-                    <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></Button>
+                    <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></Button>
                     <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
-                    <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
+                    <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
                 </div>
                 <div class="p-col">
-                    <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></Button>
+                    <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></Button>
                     <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
-                    <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
+                    <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
                 </div>
             </div>
         </div>
@@ -366,14 +366,14 @@ export default {
                     <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
                 </div>
                 <div class="p-col">
-                    <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></Button>
+                    <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></Button>
                     <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
-                    <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></Button>
+                    <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
                 </div>
                 <div class="p-col">
-                    <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></Button>
+                    <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></Button>
                     <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
-                    <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></Button>
+                    <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
                 </div>
             </div>
         </div>
@@ -464,14 +464,14 @@ export default defineComponent({
                         <p-button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></p-button>
                     </div>
                     <div class="p-col">
-                        <p-button @click="confirmPosition('topleft')" icon="pi pi-arrow-down" label="TopLeft" class="p-button-warning p-mr-2"></p-button>
+                        <p-button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></p-button>
                         <p-button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></p-button>
-                        <p-button @click="confirmPosition('topright')" icon="pi pi-arrow-down" label="TopRight" class="p-button-warning"></p-button>
+                        <p-button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></p-button>
                     </div>
                     <div class="p-col">
-                        <p-button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up" label="BottomLeft" class="p-button-success p-mr-2"></p-button>
+                        <p-button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></p-button>
                         <p-button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></p-button>
-                        <p-button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up" label="BottomRight" class="p-button-success"></p-button>
+                        <p-button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></p-button>
                     </div>
                 </div>
             </div>
diff --git a/src/views/dialog/DialogDemo.vue b/src/views/dialog/DialogDemo.vue
index 37dc1ec19..536e25ef1 100755
--- a/src/views/dialog/DialogDemo.vue
+++ b/src/views/dialog/DialogDemo.vue
@@ -103,13 +103,13 @@
                     </div>
                     <div class="p-col">
                         <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
-                        <Button label="TopLeft" icon="pi pi-arrow-down" @click="openPosition('topleft')" class="p-button-warning" />
-                        <Button label="TopRight" icon="pi pi-arrow-down" @click="openPosition('topright')" class="p-button-warning" />
+                        <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" />
+                        <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" />
                     </div>
                     <div class="p-col">
                         <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
-                        <Button label="BottomLeft" icon="pi pi-arrow-up" @click="openPosition('bottomleft')" class="p-button-warning" />
-                        <Button label="BottomRight" icon="pi pi-arrow-up" @click="openPosition('bottomright')" class="p-button-warning" />
+                        <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" />
+                        <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" />
                     </div>
                 </div>
 
diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
index 8c0ecdbe7..6541e4a37 100755
--- a/src/views/dialog/DialogDoc.vue
+++ b/src/views/dialog/DialogDoc.vue
@@ -447,18 +447,18 @@ export default {
             </div>
             <div class="p-col">
                 <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
-                <Button label="TopLeft" icon="pi pi-arrow-down" @click="openPosition('topleft')" class="p-button-warning" />
-                <Button label="TopRight" icon="pi pi-arrow-down" @click="openPosition('topright')" class="p-button-warning" />
+                <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" />
+                <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" />
             </div>
             <div class="p-col">
                 <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
-                <Button label="BottomLeft" icon="pi pi-arrow-up" @click="openPosition('bottomleft')" class="p-button-warning" />
-                <Button label="BottomRight" icon="pi pi-arrow-up" @click="openPosition('bottomright')" class="p-button-warning" />
+                <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" />
+                <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" />
             </div>
         </div>
 
         <Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
-           <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+            <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
             <template #footer>
@@ -650,18 +650,18 @@ p {
             </div>
             <div class="p-col">
                 <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
-                <Button label="TopLeft" icon="pi pi-arrow-down" @click="openPosition('topleft')" class="p-button-warning" />
-                <Button label="TopRight" icon="pi pi-arrow-down" @click="openPosition('topright')" class="p-button-warning" />
+                <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" />
+                <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" />
             </div>
             <div class="p-col">
                 <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
-                <Button label="BottomLeft" icon="pi pi-arrow-up" @click="openPosition('bottomleft')" class="p-button-warning" />
-                <Button label="BottomRight" icon="pi pi-arrow-up" @click="openPosition('bottomright')" class="p-button-warning" />
+                <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" />
+                <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" />
             </div>
         </div>
 
         <Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
-           <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+            <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
             <template #footer>
@@ -854,13 +854,13 @@ p {
                 </div>
                 <div class="p-col">
                     <p-button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning"></p-button>
-                    <p-button label="TopLeft" icon="pi pi-arrow-down" @click="openPosition('topleft')" class="p-button-warning"></p-button>
-                    <p-button label="TopRight" icon="pi pi-arrow-down" @click="openPosition('topright')" class="p-button-warning"></p-button>
+                    <p-button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning"></p-button>
+                    <p-button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning"></p-button>
                 </div>
                 <div class="p-col">
                     <p-button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning"></p-button>
-                    <p-button label="BottomLeft" icon="pi pi-arrow-up" @click="openPosition('bottomleft')" class="p-button-warning"></p-button>
-                    <p-button label="BottomRight" icon="pi pi-arrow-up" @click="openPosition('bottomright')" class="p-button-warning"></p-button>
+                    <p-button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning"></p-button>
+                    <p-button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning"></p-button>
                 </div>
             </div>
 
diff --git a/src/views/selectbutton/SelectButtonDoc.vue b/src/views/selectbutton/SelectButtonDoc.vue
index 55ff7db9c..8eab68eae 100755
--- a/src/views/selectbutton/SelectButtonDoc.vue
+++ b/src/views/selectbutton/SelectButtonDoc.vue
@@ -139,6 +139,12 @@ export default {
                     </tr>
 				</thead>
 				<tbody>
+                    <tr>
+                        <td>change</td>
+                        <td>event.originalEvent: browser event <br>
+                            event.value: Single value or an array of values that are selected.</td>
+                        <td>Callback to invoke on value change.</td>
+                    </tr>
                     <tr>
                         <td>focus</td>
                         <td>event: Browser event</td>