enh(breadcrumb): conditionally renders button when no redirection lin…

…k given

Signed-off-by: Eduardo Morales <emoral435@gmail.com>

src/components/NcBreadcrumb/NcBreadcrumb.vue

@@ -25,6 +25,7 @@
 ### General description
 
 This component is meant to be used inside a Breadcrumbs component.
+Renders a button element when given no redirection props, otherwise, renders <a/> or <router-link/> elements
 
 </docs>
 
@@ -75,6 +76,7 @@ This component is meant to be used inside a Breadcrumbs component.
 <script>
 import NcActions from '../NcActions/index.js'
 import GenRandomId from '../../utils/GenRandomId.js'
+import NcButton from '../NcButton/NcButton.vue'
 
 import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 
@@ -83,6 +85,7 @@ export default {
 	components: {
 		NcActions,
 		ChevronRight,
+		NcButton,
 	},
 	inheritAttrs: false,
 	props: {
@@ -180,20 +183,24 @@ export default {
 	},
 	computed: {
 		/**
-		 * Determines which element tag to use
+		 * Determines which element tag to use, between <NcButton/>, <a/>, and <router-link/>
 		 *
 		 * @return {string} the tag
 		 */
 		tag() {
+			// if neither <router-link/. or <a/>, we render a button
+			if (!this.to && !this.href) {
+				return 'NcButton'
+			}
 			return this.to ? 'router-link' : 'a'
 		},
 
 		/**
 		 * The attributes to pass to `router-link` or `a`
 		 */
 		linkAttributes() {
-			// If it's a router-link, we pass `to` and `exact`, otherwise only `href`
-			return this.to ? { to: this.to, exact: this.exact, ...this.$attrs } : { href: this.href, ...this.$attrs }
+			// If it's a router-link, we pass `to` and `exact`, if its an <a/> element, we pass `href`, otherwise we have a button
+			return this.to ? { to: this.to, exact: this.exact, ...this.$attrs } : (this.href ? { href: this.href, ...this.$attrs } : { type: 'tertiary', ...this.$attrs })
 		},
 	},
 	methods: {