diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
index 026772817c..01a47cf9ef 100644
--- a/src/components/NcActions/NcActions.vue
+++ b/src/components/NcActions/NcActions.vue
@@ -545,6 +545,86 @@ export default {
```
+### Wide buttons
+
+```vue
+
+
+
+
+
+
+
+
+
+ Rename
+
+
+
+
+
+ Delete
+
+
+
+
+
+ Validate
+
+
+
+
+
+ Download
+
+
+
+
+
+
+
+
+
+
+ Rename
+
+
+
+
+
+ Delete
+
+
+
+
+
+ Validate
+
+
+
+
+
+ Download
+
+
+
+
+```
+
### Use cases
```vue
@@ -1178,6 +1258,14 @@ export default {
default: null,
},
+ /**
+ * Specifies whether the button should span all the available width.
+ */
+ wide: {
+ type: Boolean,
+ default: false,
+ },
+
/**
* Specify the size used for trigger and single actions buttons.
*
@@ -2072,6 +2160,7 @@ export default {
`action-item--${this.triggerButtonVariant}`,
{
'action-item--open': this.opened,
+ 'action-item--wide': this.wide,
},
],
},
@@ -2124,6 +2213,10 @@ export default {
background-color: var(--open-background-color);
}
+ &.action-item--wide {
+ width: 100%;
+ }
+
&__menutoggle__icon {
width: 20px;
height: 20px;