VFab API

Props

name	type	default
`absolute`	boolean	false
Applies position: absolute to the component.
`active`	boolean	true
Controls the active state of the item. This is typically used to highlight the component.
`active-color`	string	undefined
The applied color when the component is in an active state.
`app`	boolean	false
If true, attaches to the closest layout and positions according to the value of location.
`appear`	boolean	false
Used to control the animation of the FAB.
`append-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Creates a v-icon component after default content in the append slot.
`base-color`	string	undefined
Sets the color of component when not focused.
`block`	boolean	false
Expands the button to 100% of available space.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disabled`	boolean	false
Removes the ability to click or target the component.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`exact`	boolean	false
Exactly match the link. Without this, ‘/’ will match every route. You can find more information about the exact prop on the vue-router documentation.
`extended`	boolean	false
An alternate style for the FAB that expects text.
`flat`	boolean	false
Removes the button box shadow. This is different than using the ‘flat’ variant.
`height`	string \| number	undefined
Sets the height for the component.
`href`	string	undefined
Designates the component as anchor and applies the href attribute.
`icon`	\| boolean \| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	false
Apply a specific icon using the v-icon component. The button will become round.
`layout`	boolean	false
If true, will effect layout dimensions based on size and position.
`loading`	string \| boolean	false
Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it’s supported by the component) or the primary color.
`location`	Anchor	undefined
The location of the fab relative to the layout. Only works when using app.
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`model-value`	boolean	true
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`name`	string	undefined
Assign a specific name for layout registration.
`offset`	boolean	false
Translates the Fab up or down, depending on if location is set to top or bottom.
`order`	string \| number	0
Adjust the order of the component in relation to its registration order.
`position`	'fixed' \| 'static' \| 'relative' \| 'absolute' \| 'sticky'	undefined
Sets the position for the component.
`prepend-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Creates a v-icon component in the prepend slot before default content.
`readonly`	boolean	false
Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard.
`replace`	boolean	false
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.
`ripple`	boolean \| { class: string; keys: string[] }	true
Applies the v-ripple directive.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`selected-class`	string	undefined
Configure the active CSS class applied when an item is selected.
`size`	string \| number	'default'
Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: x-small, small, default, large, and x-large.
`slim`	boolean	false
Reduces padding to 0 8px.
`stacked`	boolean	false
Displays the button as a flex-column.
`symbol`	any	undefined
The Symbol used to hook into group functionality for components like v-btn-toggle and v-bottom-navigation.
`tag`	string \| (new () => any) \| FunctionalComponent	'button'
Specify a custom tag used on the root element.
`text`	string \| number \| boolean	undefined
Specify content text for the component.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`to`	string \| RouteLocationAsRelativeGeneric \| RouteLocationAsPathGeneric	undefined
Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation.
`transition`	string \| boolean \| (TransitionProps & { component: Component })	'fab-transition'
Sets the component transition. Can be one of the built in or custom transition.
`value`	any	undefined
The value used when the component is selected in a group. If not provided, a unique ID will be used.
`variant`	'text' \| 'flat' \| 'elevated' \| 'tonal' \| 'outlined' \| 'plain'	'elevated'
Applies a distinct style to the component.
`width`	string \| number	undefined
Sets the width for the component.

Events

name	type
`update:modelValue`	[boolean]
Event that is emitted when the component’s model changes.

Slots

never

`default`
The default Vue slot.

SASS Variables

name	default
`$fab-border-radius`	map.get(settings.$rounded, 'circle')
`$fab-border-radius-multiplier`	0
`$fab-elevation`	3
`$fab-font-size`	tools.map-deep-get(settings.$typography, 'label-large', 'size')
`$fab-font-weight`	tools.map-deep-get(settings.$typography, 'label-large', 'weight')
`$fab-hover-elevation`	4
`$fab-padding-ratio`	2.25
`$fab-size-scales`	( 'x-small': -2, 'small': -1, 'default': 0, 'large': 2, 'x-large': 5 )
`$fab-sizes`	map.merge( ( 'height': $fab-height, 'font-size': $fab-font-size, 'width-ratio': $fab-width-ratio, 'padding-ratio': $fab-padding-ratio ), $fab-sizes )
`$fab-transition-duration`	0.2s
`$fab-transition-timing-function`	settings.$standard-easing
`$fab-width-ratio`	math.div(16, 9)

#VFab API

VFab API