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.
Feather 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.
VButton Props
Here is the full props available for <VButton /> component:
| Props | Default | Type |
|---|---|---|
| to | undefined | string, RouteLocationAsString |
| href | undefined | string |
| icon | undefined | string |
| iconCaret | undefined | string |
| size | undefined | big, huge |
| color | undefined | primary, success, info, warning, danger, white |
| rounded | false | boolean |
| bold | false | boolean |
| fullwidth | false | boolean |
| light | false | boolean |
| raised | false | boolean |
| outlined | false | boolean |
| darkOutlined | false | boolean |
| loading | false | boolean |
| placeload | false | boolean |
| lower | false | boolean |
| disabled | false | boolean |
| static | false | boolean |
VButton Slots
Here is the full slots available for <VButton /> component:
| Slot | Properties | Description |
|---|---|---|
| #default required | null | Button content |