Use the default slot to set the label of the Button.
<template>
<PButton>Button</PButton>
</template>
Use the label prop to set the label of the Button.
<template>
<PButton label="Button" />
</template>
Use the color prop to change the color of the Button.
<template>
<PButton color="neutral">Button</PButton>
</template>
Use the variant prop to change the variant of the Button.
<template>
<PButton color="neutral" variant="outline">Button</PButton>
</template>
Use the size prop to change the size of the Button.
<template>
<PButton size="xl">Button</PButton>
</template>
Use the icon prop to show an Icon inside the Button.
<template>
<PButton icon="i-lucide:rocket" size="md" color="primary" variant="solid">Button</PButton>
</template>
Use the leading and trailing props to set the icon position or the leading-icon and trailing-icon props to set a different icon for each position.
<template>
<PButton trailing-icon="i-lucide:arrow-right" size="md">Button</PButton>
</template>
The label as prop or slot is optional so you can use the Button as an icon-only button.
<template>
<PButton icon="i-lucide:search" size="md" color="primary" variant="solid" />
</template>
Use the avatar prop to show an Avatar inside the Button.
<template>
<PButton
:avatar="{
src: 'https://github.com/nuxt.png'
}"
size="md"
color="neutral"
variant="outline"
>
Button
</PButton>
</template>
The label as prop or slot is optional so you can use the Button as an avatar-only button.
<template>
<PButton
:avatar="{
src: 'https://github.com/nuxt.png'
}"
size="md"
color="neutral"
variant="outline"
/>
</template>
You can pass any property from the Link component such as to, target, etc.
<template>
<PButton to="https://github.com/nuxt/ui" target="_blank">Button</PButton>
</template>
When the Button is a link or when using the active prop, you can use the active-color and active-variant props to customize the active state.
<template>
<PButton active color="neutral" variant="outline" active-color="primary" active-variant="solid">
Button
</PButton>
</template>
You can also use the active-class and inactive-class props to customize the active state.
<template>
<PButton active active-class="font-bold" inactive-class="font-light">Button</PButton>
</template>
app.config.ts file under the pohon.button.variants.active key.export default defineAppConfig({
pohon: {
button: {
variants: {
active: {
true: {
base: 'font-bold'
}
}
}
}
}
})
Use the loading prop to show a loading icon and disable the Button.
<template>
<PButton loading>Button</PButton>
</template>
Use the loading-auto prop to show the loading icon automatically while the @click promise is pending.
<script setup lang="ts">
async function onClick() {
return new Promise<void>((res) => setTimeout(res, 1000));
}
</script>
<template>
<PButton
loading-auto
@click="onClick"
>
Button
</PButton>
</template>
This also works with the Form component.
<script setup lang="ts">
import { reactive } from 'vue';
const state = reactive({ fullName: '' });
async function onSubmit() {
return new Promise<void>((res) => setTimeout(res, 1000));
}
async function validate(data: Partial<typeof state>) {
if (!data.fullName?.length) {
return [{ name: 'fullName', message: 'Required' }];
}
return [];
}
</script>
<template>
<PForm
:state="state"
:validate="validate"
@submit="onSubmit"
>
<PFormField
name="fullName"
label="Full name"
>
<PInput v-model="state.fullName" />
</PFormField>
<PButton
type="submit"
class="mt-2"
loading-auto
>
Submit
</PButton>
</PForm>
</template>
Use the loading-icon prop to customize the loading icon. Defaults to i-lucide:loader-circle.
<template>
<PButton loading loading-icon="i-lucide:loader">Button</PButton>
</template>
Use the disabled prop to disable the Button.
<template>
<PButton disabled>Button</PButton>
</template>
class propUse the class prop to override the base styles of the Button.
<template>
<PButton class="akar:font-bold akar:rounded-full">Button</PButton>
</template>
pohon propUse the pohon prop to override the slots styles of the Button.
<template>
<PButton
icon="i-lucide:rocket"
color="neutral"
variant="outline"
:pohon="{
leadingIcon: 'color-primary'
}"
>
Button
</PButton>
</template>
| Prop | Default | Type |
|---|
| Slot | Type |
|---|
Below is the theme configuration skeleton for the PButton. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
button: {
slots: {
base: '',
label: '',
leadingIcon: '',
leadingAvatar: '',
leadingAvatarSize: '',
trailingIcon: ''
},
variants: {
fieldGroup: {
horizontal: '',
vertical: ''
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: '',
ghost: '',
link: ''
},
size: {
xs: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: ''
},
sm: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: ''
},
md: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: ''
},
lg: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: ''
},
xl: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: ''
}
},
block: {
true: {
base: '',
trailingIcon: ''
}
},
square: {
true: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
active: {
true: {
base: ''
},
false: {
base: ''
}
}
},
compoundVariants: [],
defaultVariants: {
color: 'primary',
variant: 'solid',
size: 'md'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
button: {
slots: {
base: '',
label: '',
leadingIcon: '',
leadingAvatar: '',
leadingAvatarSize: '',
trailingIcon: ''
},
variants: {
fieldGroup: {
horizontal: '',
vertical: ''
},
color: {
primary: '',
secondary: '',
success: '',
info: '',
warning: '',
error: '',
neutral: ''
},
variant: {
solid: '',
outline: '',
soft: '',
subtle: '',
ghost: '',
link: ''
},
size: {
xs: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: ''
},
sm: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: ''
},
md: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: ''
},
lg: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: ''
},
xl: {
base: '',
leadingIcon: '',
leadingAvatarSize: '',
trailingIcon: ''
}
},
block: {
true: {
base: '',
trailingIcon: ''
}
},
square: {
true: ''
},
leading: {
true: ''
},
trailing: {
true: ''
},
loading: {
true: ''
},
active: {
true: {
base: ''
},
false: {
base: ''
}
}
},
compoundVariants: [],
defaultVariants: {
color: 'primary',
variant: 'solid',
size: 'md'
}
}
}
};