In this tutorial, we will create buttons in nuxt 3 with Nuxtlabs UI. Before we begin, you need to install and configure Nuxtlabs UI in Nuxt 3.
How to Install Nuxtlabs UI in Nuxt 3
1. Nuxt 3 with Nuxtlabs UI basic badge using UButton
component.
<UButton>Button</UButton>
2. Nuxt 3 with Nuxtlabs UI button with lable.
<UButton label="Button" />
3. Nuxt 3 with Nuxtlabs UI button with colors primary, red, blue, yellow, etc.
<template>
<div>
<UButton color="primary" variant="solid">Button</UButton>
<UButton color="red" variant="solid">Button</UButton>
<UButton color="orange" variant="solid">Button</UButton>
<UButton color="yellow" variant="solid">Button</UButton>
<UButton color="teal" variant="solid">Button</UButton>
<UButton color="blue" variant="solid">Button</UButton>
<UButton color="indigo" variant="solid">Button</UButton>
<UButton color="purple" variant="solid">Button</UButton>
<UButton color="rose" variant="solid">Button</UButton>
</div>
</template>
4. Nuxt 3 with Nuxtlabs UI outlined button with colors.
<template>
<div>
<UButton color="primary" variant="outline">Button</UButton>
<UButton color="red" variant="outline">Button</UButton>
<UButton color="orange" variant="outline">Button</UButton>
<UButton color="yellow" variant="outline">Button</UButton>
<UButton color="teal" variant="outline">Button</UButton>
<UButton color="blue" variant="outline">Button</UButton>
<UButton color="indigo" variant="outline">Button</UButton>
<UButton color="purple" variant="outline">Button</UButton>
<UButton color="rose" variant="outline">Button</UButton>
</div>
</template>
5. Nuxt 3 with Nuxtlabs UI soft button with colors.
<template>
<div>
<UButton color="primary" variant="soft">Button</UButton>
<UButton color="red" variant="soft">Button</UButton>
<UButton color="orange" variant="soft">Button</UButton>
<UButton color="yellow" variant="soft">Button</UButton>
<UButton color="teal" variant="soft">Button</UButton>
<UButton color="blue" variant="soft">Button</UButton>
<UButton color="indigo" variant="soft">Button</UButton>
<UButton color="purple" variant="soft">Button</UButton>
<UButton color="rose" variant="soft">Button</UButton>
</div>
</template>
6. Nuxt 3 with Nuxtlabs UI ghost button.
<UButton color="blue" variant="ghost" />
7. Nuxt 3 with Nuxtlabs UI link button.
<UButton color="blue" variant="link" />
8. Nuxt 3 with Nuxtlabs UI gray button, white button, black button.
<UButton color="white" variant="solid">Button</UButton>
<UButton color="gray" variant="solid">Button</UButton>
<UButton color="black" variant="solid">Button</UButton>
9. Nuxt 3 with Nuxtlabs UI button with size small, medium, large.
<template>
<div>
<UButton size="2xs">Button</UButton>
<UButton size="xs">Button</UButton>
<UButton size="sm">Button</UButton>
<UButton size="md">Button</UButton>
<UButton size="lg">Button</UButton>
<UButton size="xl">Button</UButton>
</div>
</template>
Javed sheikh
Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,