Button

Use NbButton for an action. Use NbLink when the destination is a URL.

Preview

Click Save changes to see the loading state. The other buttons show the available color variants.

PreviewCode

Copy

<script setup lang="ts">
import { ref } from 'vue'
import { NbButton } from '@neobrut-vue/core'

const loading = ref(false)
function simulateSave() {
  loading.value = true
  window.setTimeout(() => { loading.value = false }, 900)
}
</script>

<template>
  <div class="demo-row">
    <NbButton @click="simulateSave" :loading="loading">Save changes</NbButton>
    <NbButton variant="secondary">Secondary</NbButton>
    <NbButton variant="accent">Accent</NbButton>
    <NbButton variant="ghost">Ghost</NbButton>
  </div>
</template>

<style scoped>
.demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
</style>

Props

Prop	Values	Default
variant	primary, secondary, accent, danger, ghost	primary
size	sm, md, lg	md
type	button, submit, reset	button
loading	boolean	false
disabled	boolean	false

The button is a native <button>, so it retains keyboard activation. Loading also disables it and sets aria-busy.