Button
Overview
The VButton component in UiKit is designed for versatility and customization. You can control various styles and behaviors through props in file ui-kit/src/components/VButton/index.sass, making it suitable for different use cases across your application.
Usage
To add the VButton component, start by importing it into your Vue file:
vue
import VButton from 'UiKit/components/VButton';Example
Place the component in your template like this:
vue
<VButton
size="large"
color="primary"
:loading="isLoading"
>
Click Me
</VButton>size: Defines the button size (large, medium, small, or x-small).color: Defines the button color (primary, secondary, success, warning, or danger).loading: A boolean prop that shows a spinner when true.
Component Props
ts
defineProps({
tag: {
type: String as PropType<'button' | 'a' | 'router-link'>,
default: 'button',
},
size: {
type: String as PropType<'large' | 'medium' | 'small' | 'x-small'>,
default: 'medium',
},
variant: String,
color: {
type: String as PropType<'primary' | 'secondary' | 'success' | 'warning' | 'danger'>,
default: 'primary',
},
block: Boolean,
disabled: Boolean,
loading: Boolean,
squared: Boolean,
pill: Boolean,
iconOnly: Boolean,
iconPlacement: {
type: String as PropType<'none' | 'left' | 'right' | 'both'>,
default: 'none',
},
});tag: Defines the HTML element to render (button, a, or router-link). Default is button.size: Controls the button's size, which can be large, medium, small, or x-small.variant: (Optional) Defines the button variant (outlined, link).color: Sets the button's color, with options including primary, secondary, success, warning, and danger.block: (Optional) If true, the button will take the full width of its container.disabled: (Optional) If true, the button will be disabled.loading: (Optional) If true, the button will display a spinner.squared: (Optional) If true, the button will have squared corners.pill: (Optional) If true, the button will have pill-shaped corners.iconOnly: (Optional) If true, the button will only display an icon, with no text.iconPlacement: Defines the placement of icons (none, left, right, both).
Icon Customization
To include icons, use the iconOnly prop and the iconPlacement prop to control the icon's display. For example, to show an icon to the left of the text:
vue
<VButton
iconOnly
iconPlacement="left"
color="primary"
>
<svg>...</svg> <!-- Replace with your icon -->
</VButton>Complete Example
Here’s a complete example showcasing a button that handles loading state and displays a spinner:
vue
<script setup lang="ts">
import { ref } from 'vue';
import VButton from 'UiKit/components/VButton';
import { VSvgIcon } from 'UiKit/components/VSvgIcon/VSvgIcon.vue';
const isLoading = ref(false);
function handleButtonClick() {
isLoading.value = true;
// Simulate an API call
setTimeout(() => {
isLoading.value = false;
}, 2000);
}
</script>
<template>
<VButton
size="large"
color="primary"
:loading="isLoading"
@click="handleButtonClick"
>
Submit
</VButton>
</template>