VButton
Vuero provides a <VButton /> component if you don't want to use the simple Html button. VButtons can be made bold and rounded by using the bold and rounded props on the component.
RouterLink
<VButton /> provides a to property that can be used like on <RouterLink />. You can also use a href property to render a standard <a> tag. If none is used a <button> is rendered insted.
Colors
<VButton /> components can have different colors. Use the color prop on the component to change its color. Available color values are primary, info, success, warning, danger and white.
Light Colors
<VButton /> solid color can have a very light tint of their original color. Use the color prop to set a solid color and use the light modifier prop to make a light colored button.
Outlined Colors
<VButton /> solid color can have an outlined button style. Use the color prop to set a solid color and use the outlined modifier prop to make an outlined button.
Placeload
<VButton /> components can have a placeloading status. Use the placeload prop on the component to change its state.
Elevation
<VButton /> components can be elevated using box shadows. Use the raised prop to show a box shadow on hover or use the elevated prop to set a permanent box shadow.
Disabled
<VButton /> components can be disabled and not responsive to pointer events. Use the disabled prop to set a button in a disabled state.
Font Awesome
<VButton /> components work well with Font Awesome Icons. Add an icon name inside the icon prop to set a Font Awesome icon. You can also create square and circle buttons with a single icon using the <VIconButton /> component. Please refer to markup for detailed examples.
Lucide Icons
<VButton /> components work well with Font Awesome Icons. Add an icon name inside the icon prop to set a Font Awesome icon. You can also create square and circle buttons with a single icon using the <VIconButton /> component. Please refer to markup for detailed examples.
Button group
You can easily align <VButton /> components and group them together by wrapping them inside a <VButtons /> element. You can mix any button styles.
Addons
You can easily create <VButton /> addons and group them together by wrapping them inside a <div class="field is-grouped"><div> element. You can mix any button styles.
| Name | Default | Type |
|---|---|---|
| :bold | ||
| :color | ||
| :dark | ||
| :dark-outlined | ||
| :disabled | ||
| :elevated | ||
| :fullwidth | ||
| :href | ||
| :icon | ||
| :icon-caret | ||
| :light | ||
| :loading | ||
| :lower | ||
| :outlined | ||
| :placeload | ||
| :raised | ||
| :rounded | ||
| :size | ||
| :static | ||
| :to |