@nextcloud/vue

Appearance

Return to top
On this page

NcActionButton

Button component to be used in Actions

Props

Prop nameDescriptionTypeValuesDefault
iconIcon to show with the action, can be either a CSS class or an URLstring-''
titleTitle to show next to the iconstring-''
closeAfterClickWhether we close the Actions menu after the clickboolean-false
ariaLabelAria label for the button. Not needed if the button has text.string-''
disableddisabled state of the action buttonboolean-false

Events

Event namePropertiesDescription
clickEmitted when the action is clicked

Slots

NameDescriptionBindings
iconManually provide icon
default

This component is made to be used inside of the NcActions component slots.

vue
<template>
  <div style="display: flex; align-items: center;">
    <NcActions>
      <NcActionButton @click="showMessage('Delete')">
        <template #icon>
          <Delete :size="20" />
        </template>
        Delete
      </NcActionButton>
      <NcActionButton
        :close-after-click="true"
        @click="showMessage('Delete and close menu')"
      >
        <template #icon>
          <Delete :size="20" />
        </template>
        Delete and close
      </NcActionButton>
      <NcActionButton :close-after-click="true" @click="focusInput">
        <template #icon>
          <Plus :size="20" />
        </template>
        Create
      </NcActionButton>
      <NcActionButton :disabled="true" @click="showMessage('Disabled')">
        <template #icon>
          <Delete :size="20" />
        </template>
        Disabled button
      </NcActionButton>
    </NcActions>
    <input ref="input" />
  </div>
</template>
<script>
import Delete from "vue-material-design-icons/Delete";
import Plus from "vue-material-design-icons/Plus";

export default {
  components: {
    Delete,
    Plus
  },
  methods: {
    showMessage(msg) {
      alert(msg);
    },
    focusInput() {
      this.$nextTick(() => this.$refs.input.focus());
    }
  }
};
</script>

If you're using a long text you can specify a title

vue
<template>
  <NcActions>
    <NcActionButton icon="icon-add" @click="showMessage('Add')">
      Add new
    </NcActionButton>
    <NcActionButton title="Long button" @click="showMessage('Delete')">
      <template #icon>
        <Delete :size="20" />
      </template>
      This button is associated with a very long text.\nAnd with new lines too.
    </NcActionButton>
  </NcActions>
</template>
<script>
import Delete from "vue-material-design-icons/Delete";

export default {
  components: {
    Delete
  },
  methods: {
    showMessage(msg) {
      alert(msg);
    }
  }
};
</script>

Action icon attribute with a single action

vue
<template>
  <NcActions>
    <NcActionButton icon="icon-add" @click="showMessage('Add')">
      Add new
    </NcActionButton>
  </NcActions>
</template>
<script>
export default {
  methods: {
    showMessage(msg) {
      alert(msg);
    }
  }
};
</script>

You can also use a custom icon, for example from the vue-material-design-icons library:

vue
<template>
  <NcActions>
    <NcActionButton>
      <template #icon>
        <HandBackLeft :size="20" />
      </template>
      Raise left hand
    </NcActionButton>
    <NcActionButton>
      <template #icon>
        <HandBackRight :size="20" />
      </template>
      Raise right hand
    </NcActionButton>
  </NcActions>
</template>
<script>
import HandBackLeft from "vue-material-design-icons/HandBackLeft";
import HandBackRight from "vue-material-design-icons/HandBackRight";

export default {
  components: {
    HandBackLeft,
    HandBackRight
  }
};
</script>