The v-btn component replaces the standard html button with a material design theme and a multitude of options. Any color helper class can be used to alter the background or text color.
Buttons in their simplest form contain uppercase text, a slight elevation, hover effect, and a ripple effect on click.
Select your desired component from below and see the available props, slots, events and functions.
Applies position: absolute to the component.
Configure the active CSS class applied when the link is active. You can find more information about the active-class prop on the vue-router documentation.
Setting append prop always appends the relative path to the current path. You can find more information about the append prop on the vue-router documentation.
Expands the button to 100% of available space.
Aligns the component towards the bottom.
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.
Removes the button box shadow.
Removes the ability to click or target the component.
Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page.
Exactly match the link. Without this, '/' will match every route. You can find more information about the exact prop on the vue-router documentation.
Configure the active CSS class applied when the link is active with exact match. You can find more information about the exact-active-class prop on the vue-router documentation.
Designates the button as a floating-action-button - round.
Applies position: fixed to the component.
Sets the height for the component.
Designates the component as anchor and applies the href attribute.
Designates the button as icon - round and flat
Controls the button's active state.
Makes the component large.
Aligns the component towards the left. This should be used with the absolute or fixed props.
Applies the light theme variant to the component.
Designates that the component is a link. This is automatic when using the href or to prop.
Adds a loading icon animation
Sets the maximum height for the component.
Sets the maximum width for the component.
Sets the minimum height for the component.
Sets the minimum width for the component.
Specifies the link is a nuxt-link. For use with the nuxt framework.
Makes the background transparent and applies a thin border.
Setting replace prop will call router.replace() instead of router.push() when clicked, so the navigation will not leave a history record. You can find more information about the replace prop on the vue-router documentation.
Don't blur on click.
Aligns the component towards the right. This should be used with the absolute or fixed props.
Applies a large border radius on the button.
Applies a large border radius on the top left and bottom right of the card.
Makes the component small.
Specify a custom tag used on the root element.
Designates the target attribute. This should only be applied when using the href prop.
Makes the background transparent.
Removes the component's border-radius.
Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation.
Aligns the content towards the top.
Set the button's type attribute
The value used when the component is selected in a group. If not provided, the index will be used.
Sets the width for the component.
Makes the component extra large.
Makes the component extra small.
The default Vue slot.
Custom loader
Event that is emitted when the component is clicked
Event0.18 !default;$border-radius-root !default;0.24 !default;map-deep-merge(
(
'x-small': .625rem,
'small': .75rem,
'default': .875rem,
'large': .875rem,
'x-large': 1rem
),
$btn-font-sizes
);500 !default;0.08 !default;18px !default;12px !default;.0892857143em !default;thin !default;28px !default;map-deep-merge(
(
'x-small': 20,
'small': 28,
'default': 36,
'large': 44,
'x-large': 52
),
$btn-sizes
);uppercase !default;opacity 0.2s map-get($transition, 'ease-in-out') !default;0.28s !default;map-get($transition, 'fast-out-slow-in') !default;map-deep-merge(
(
'x-small': 18,
'small': 24,
'default': 24,
'large': 28,
'x-large': 32
),
$fab-icon-sizes
);map-deep-merge(
(
'x-small': 32,
'small': 40,
'default': 56,
'large': 64,
'x-large': 72
),
$fab-sizes
);v-btn is the only component that behaves differently when using the dark prop. Normally components use the dark prop to denote that they have a dark colored background and need their text to be white. While this will work for v-btn, it is advised to only use the prop when the button IS ON a colored background due to the disabled state blending in with white backgrounds. If you need white text, simply add the white--text class.
Below is a collection of simple to complex examples.
Text buttons have no box shadow and no background. Only on hover is the container for the button shown.
Raised buttons have a box shadow that increases when clicked. This is the default style.
Depressed buttons still maintain their background color, but have no box shadow.
Button dropdowns are regular selects with additional styling.
Icons can be used for the primary content of a button.
Floating buttons are rounded and usually contain an icon.
Buttons can be given different sizing options to fit a multitude of scenarios.
Outlined buttons inherit their borders from the current color applied.
Rounded buttons behave the same as regular buttons but have rounded edges.
Tile buttons behave the same as regular buttons but have no border radius.
Block buttons extend the full available width.
Using the loading prop, you can notify a user that there is processing taking place. The default behavior is to use a v-progress-circular component but this can be customized.
Ready for more? Continue reading with: