VirgoButton
Default classes
ts
import type { virgoButtonProps } from '@/components/button/meta'
import type { ComponentClasses } from '@/plugin'
export const virgoButtonClasses: ComponentClasses<virgoButtonProps> = {
button: ({ iconOnly, disabled, variant }) => {
return [
'inline-flex whitespace-nowrap justify-center items-center relative text-white bg-purple-500 shadow-md shadow-purple-500/20 transition-all hover:shadow-lg hover:shadow-purple-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none',
iconOnly ? 'px-2 font-medium rounded-lg aspect-square min-w-10 focus-visible:ring-2 ring-offset-2 uno-layer-base-i:[&_.virgo-buttonn-content]-text-lg' : 'px-6 font-medium rounded-lg h-10 focus-visible:ring-2 ring-offset-2',
{
'opacity-50 pointer-events-none shadow-none': disabled,
'its-block': variant?.block,
'large-size': variant?.large,
'its-outline': variant?.outline,
'its-primary': variant?.primary,
}
]
},
loader: ({ loading }) => {
return [
'absolute',
loading ? 'opacity-100' : 'opacity-0'
]
},
content: ({ loading }) => {
return [
'virgo-button-content flex items-center justify-center gap-x-2',
{
'opacity-0': loading
}
]
},
something: 'asdasd'
}
export type virgoButtonClassesValidKeys = keyof typeof virgoButtonClassesimport type { virgoButtonProps } from '@/components/button/meta'
import type { ComponentClasses } from '@/plugin'
export const virgoButtonClasses: ComponentClasses<virgoButtonProps> = {
button: ({ iconOnly, disabled, variant }) => {
return [
'inline-flex whitespace-nowrap justify-center items-center relative text-white bg-purple-500 shadow-md shadow-purple-500/20 transition-all hover:shadow-lg hover:shadow-purple-500/40 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none',
iconOnly ? 'px-2 font-medium rounded-lg aspect-square min-w-10 focus-visible:ring-2 ring-offset-2 uno-layer-base-i:[&_.virgo-buttonn-content]-text-lg' : 'px-6 font-medium rounded-lg h-10 focus-visible:ring-2 ring-offset-2',
{
'opacity-50 pointer-events-none shadow-none': disabled,
'its-block': variant?.block,
'large-size': variant?.large,
'its-outline': variant?.outline,
'its-primary': variant?.primary,
}
]
},
loader: ({ loading }) => {
return [
'absolute',
loading ? 'opacity-100' : 'opacity-0'
]
},
content: ({ loading }) => {
return [
'virgo-button-content flex items-center justify-center gap-x-2',
{
'opacity-0': loading
}
]
},
something: 'asdasd'
}
export type virgoButtonClassesValidKeys = keyof typeof virgoButtonClassesIcons
You can use icon prop to render icon in button.
Use append-icon prop to render icon after default slot.
<template>
<!-- Star -->
<div class="flex gap-x-4 flex-wrap gap-y-2">
<virgo-button icon="i-bx-star">
<span>Primary</span>
</virgo-button>
</div>
</template><template>
<!-- Star -->
<div class="flex gap-x-4 flex-wrap gap-y-2">
<virgo-button icon="i-bx-star">
<span>Primary</span>
</virgo-button>
</div>
</template>You can also use default slot to render icon.
vue
<template>
<virgo-button>
<i class="i-bx-star" />
<span>Primary</span>
</virgo-button>
</template><template>
<virgo-button>
<i class="i-bx-star" />
<span>Primary</span>
</virgo-button>
</template>Block
Add w-full class to make block button.
<template>
<div class="grid-row grid-cols-2 gap-2 space-y-2">
<virgo-button class="w-full">
Buttom 1
</virgo-button>
<virgo-button class="w-full">
Button 2
</virgo-button>
</div>
</template><template>
<div class="grid-row grid-cols-2 gap-2 space-y-2">
<virgo-button class="w-full">
Buttom 1
</virgo-button>
<virgo-button class="w-full">
Button 2
</virgo-button>
</div>
</template>Icon Only
Use icon-only prop to render icon with icon only button.
<template>
<div class="flex flex-wrap gap-4">
<virgo-button
icon-only
icon="i-bx-trophy"
/>
</div>
</template><template>
<div class="flex flex-wrap gap-4">
<virgo-button
icon-only
icon="i-bx-trophy"
/>
</div>
</template>Loading
You can use the loading prop to inform about a background process or asynchronous operation. This property will display a Loading component (by default) instead of the icon and/or label of the button.
<script lang="ts" setup>
import { ref } from 'vue'
const loading = ref(false)
const loadingIcon = ref(false)
const iconOnlyLoading = ref(false)
</script>
<template>
<div class="flex gap-4">
<virgo-button
:loading="loading"
@click="loading = !loading"
>
Click to load
</virgo-button>
<virgo-button @click="iconOnlyLoading = !iconOnlyLoading">
<i
v-if="iconOnlyLoading"
class="i-bx-cloud-upload"
/>
<span>Upload</span>
</virgo-button>
<virgo-button
:loading="loadingIcon"
icon-only
icon="i-bx-heart"
@click="loadingIcon = !loadingIcon"
/>
</div>
</template><script lang="ts" setup>
import { ref } from 'vue'
const loading = ref(false)
const loadingIcon = ref(false)
const iconOnlyLoading = ref(false)
</script>
<template>
<div class="flex gap-4">
<virgo-button
:loading="loading"
@click="loading = !loading"
>
Click to load
</virgo-button>
<virgo-button @click="iconOnlyLoading = !iconOnlyLoading">
<i
v-if="iconOnlyLoading"
class="i-bx-cloud-upload"
/>
<span>Upload</span>
</virgo-button>
<virgo-button
:loading="loadingIcon"
icon-only
icon="i-bx-heart"
@click="loadingIcon = !loadingIcon"
/>
</div>
</template>API
Button
disabled : boolean
Set component in disabled state
loading : boolean
Set virgo-button loading state.
Although, loading prop accepts boolean value, we set default value to undefined to indicate virgo-button won't ever use loading (show/hide) and won't render Loading component.
However, if loading prop is set to any boolean value (false/true) it will always render Loading component.
variant : RawVariant<Record<string, any>>
Useful when used in the component config classes option, to style it conditionally. Can be a string, object, or an array of string or/and object.
bare : boolean
Disable class inheritance from the Virgo plugin classes config. Only for this component.
iconOnly : boolean
Mark virgo-button as icon only virgo-button to apply square styling
appendIcon : ConfigurableValue
Append icon after virgo-button text
icon : ConfigurableValue
Render icon before virgo-button text
default : any
Default slot for rendering virgoButton content