Nova

Appearance

Button ​

Buttons provide a simple way for users to execute actions.

Import ​

ts
import {NButton} from '@nova-org/components'

Usage ​

Code
vue
<template>
  <n-button label="Button"/>
</template>
vue
<script setup lang="ts">
import {NButton} from '@nova-org/components'
</script>

Colors ​

Code
vue
<template>
  <n-button background-color="n-default" label="Default"/>
  <n-button background-color="n-primary" label="Primary"/>
  <n-button background-color="n-secondary" label="Secondary"/>
  <n-button background-color="n-success" label="Success"/>
  <n-button background-color="n-warning" label="Warning"/>
  <n-button background-color="n-danger" label="Danger"/>
</template>
vue
<script setup lang="ts">
import {NButton} from '@nova-org/components'
</script>

Variants ​

Code
vue
<template>
  <n-button variant="solid" label="Solid"/>
  <n-button variant="shadow" label="Shadow"/>
  <n-button variant="ghost" label="Ghost"/>
  <n-button variant="outline" label="Outline"/>
  <n-button variant="flat" label="Flat"/>
</template>
vue
<script setup lang="ts">
import {NButton} from '@nova-org/components'
</script>

Radius ​

Code
vue
<template>
  <n-button radius="full" label="Full"/>
  <n-button radius="lg" label="Large"/>
  <n-button radius="md" label="Medium"/>
  <n-button radius="sm" label="Small"/>
  <n-button radius="none" label="None"/>
</template>
vue
<script setup lang="ts">
import {NButton} from '@nova-org/components'
</script>

Sizes ​

Code
vue
<template>
  <n-button size="sm" label="Small"/>
  <n-button size="md" label="Medium"/>
  <n-button size="lg" label="Large"/>
</template>
vue
<script setup lang="ts">
import {NButton} from '@nova-org/components'
</script>

With icon ​

Code
vue
<template>
  <n-button icon-left="vuesax/linear/add-circle" label="Icon left"/>
  <n-button icon-right="vuesax/linear/add-circle" label="Icon right"/>
  <n-button icon-left="vuesax/linear/add-circle" icon-right="vuesax/linear/add-circle" label="Icons both"/>
</template>
vue
<script setup lang="ts">
import {NButton} from '@nova-org/components'
</script>

Icon only ​

Code
vue
<template>
  <n-button background-color="n-primary">
    <n-icon name="vuesax/linear/watch" size="22px"/>
  </n-button>
  <n-button background-color="n-primary">
    <n-icon name="vuesax/linear/add-circle" size="22px"/>
  </n-button>
  <n-button background-color="n-primary">
    <n-icon name="vuesax/linear/airpods" size="22px"/>
  </n-button>
</template>
vue
<script setup lang="ts">
import {NButton, NIcon} from '@nova-org/components'
</script>

API ​

Props ​

PropertyTypeDefault valueDescription

Slots ​

SlotDescription