diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
index 5853168cfa..79bc178965 100644
--- a/src/components/NcButton/NcButton.vue
+++ b/src/components/NcButton/NcButton.vue
@@ -197,6 +197,41 @@ button {
```
+### Alignment
+Sometimes it is required to change the icon alignment on the button, like for switching between pages as in following example:
+
+```vue
+
+
+
+
+
+
+
+ Previous page
+
+
+
+
+
+ Next page
+
+
+
+
+
+```
+
### Pressed state
It is possible to make the button stateful by adding a pressed state, e.g. if you like to create a favorite button.
The button will have the required `aria` attribute for accessibility and visual style (`primary` when pressed, and the configured type otherwise).
@@ -264,6 +299,17 @@ export default {
name: 'NcButton',
props: {
+ /**
+ * Set the text and icon alignment
+ *
+ * @default 'center'
+ */
+ alignment: {
+ type: String,
+ default: 'center',
+ validator: (alignment) => ['start', 'start-reverse', 'center', 'end', 'end-reverse'].includes(alignment),
+ },
+
/**
* Toggles the disabled state of the button on and off.
*/
@@ -388,6 +434,20 @@ export default {
}
return this.type
},
+
+ /**
+ * The flexbox alignment of the button content
+ */
+ flexAlignment() {
+ return this.alignment.split('-')[0]
+ },
+
+ /**
+ * If the button content should be reversed (icon on the end)
+ */
+ isReverseAligned() {
+ return this.alignment.indexOf('-') !== -1
+ },
},
/**
@@ -423,6 +483,8 @@ export default {
'button-vue--icon-and-text': hasIcon && hasText,
[`button-vue--vue-${this.realType}`]: this.realType,
'button-vue--wide': this.wide,
+ [`button-vue--${this.flexAlignment}`]: this.flexAlignment !== 'center',
+ 'button-vue--reverse': this.isReverseAligned,
active: isActive,
'router-link-exact-active': isExactActive,
},
@@ -556,6 +618,20 @@ export default {
width: 100%;
}
+ &--end &__wrapper {
+ justify-content: end;
+ }
+ &--start &__wrapper {
+ justify-content: start;
+ }
+ &--reverse &__wrapper {
+ flex-direction: row-reverse;
+ }
+
+ &--reverse#{&}--icon-and-text {
+ padding-inline: 16px 4px;
+ }
+
&__icon {
height: $clickable-area;
width: $clickable-area;
@@ -591,7 +667,8 @@ export default {
// Icon and text button
&--icon-and-text {
- padding: 0 16px 0 4px;
+ padding-block: 0;
+ padding-inline: 4px 16px;
}
// Wide button spans the whole width of the container